需要下載"echarts-liquidfill": "^2.0.6",這個插件，在main.js中導入插件

import 'echarts-liquidfill'

以下代碼為配置項，注釋的地方是紅色虛線，用來標識標準值在水波球的位置

let barEcharts = this.$echarts.init(this.$refs.middleEchart)const data = [13.22/16.76, 13.22/16.76]let max = 96.1let option = {title:{text:'90%',textStyle:{fontSize: 80,fontFamily: 'Microsoft Yahei',fontWeight: 'normal',color: '#fff',fontWeight:'bold',},x:'center',y:'35%'},graphic: [{type: 'group',left: 'center',top: '60%',children: [{type: 'text',z: 100,left: '10',top: 'middle',style: {fill: '#fff',text: '塌陷土地治理率',font: '43px Microsoft YaHei'}}]}],// x軸xAxis: {show: false // 不顯示},// y軸yAxis: {axisLine: {show: false},axisLabel: {fontSize: 18,color: "#d8bb93"}},grid: {top: '15%',right: '20%',bottom: '15%',left: '20%'},series:[{type: 'liquidFill',color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: 'rgba(0, 108, 154, 1)'}, {offset: 0.5,color: 'rgba(0, 155, 219, .5)'}, {offset: 0,color: 'rgba(0, 155, 219, 0)'}],globalCoord: false}],radius: '78%', // 半徑大小center: ['50%', '50%'], // 布局位置data, // 水球波紋值backgroundStyle: {color: '#1D1C1B' //背景顏色},outline: { // 輪廓設置show: true,borderDistance: 5, // 輪廓間距itemStyle: {// borderColor: '#ECE2BD', // 輪廓顏色borderColor: '#006D9B', // 輪廓顏色borderWidth: 4, // 輪廓大小shadowBlur: 'none' // 輪廓陰影}},label: {show: false}},// {// type: 'line', // 折線圖// markLine: {// label: {// show: true,// position: 'right',// fontSize: 16,// // color: 'red',// formatter: function (params) {// // params = "考核指標:\n" + max*100 + "%";// params = max * 100 + "%";// return params// }// },// emphasis: {// label: {// show: true,// position: 'right',// fontSize: 16,// // color: 'red',// formatter: function (params) {// params = "考核\n指標\n" + max * 100 + "%";// return params// }// },// lineStyle: { // 標線樣式// width: 2,// color: 'red',// type: 'dashed'// },// },// // silent: true, // 不觸發鼠標事件// symbol: 'none', // 標線兩端樣式// lineStyle: { // 標線樣式// width: 2,// color: 'red',// type: 'dashed'// },// data: [// { // 標線數據// // lineStyle: {// // color: '#d8bb93'// // },// yAxis: max// // yAxis: this.echart1Data.ptcfkTarget && this.echart1Data.ptcfkTarget !== '' ?// // this.echart1Data.ptcfkTarget / 100 : '-', y 軸// }// ]// }// }]}barEcharts.setOption(option)

總結

以上是生活随笔為你收集整理的echarts实现水波球的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。