需要下載"echarts-liquidfill": "^2.0.6",這個(gè)插件，在main.js中導(dǎo)入插件

import 'echarts-liquidfill'

以下代碼為配置項(xiàng)，注釋的地方是紅色虛線(xiàn)，用來(lái)標(biāo)識(shí)標(biāo)準(zhǔn)值在水波球的位置

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: { // 輪廓設(shè)置show: true,borderDistance: 5, // 輪廓間距itemStyle: {// borderColor: '#ECE2BD', // 輪廓顏色borderColor: '#006D9B', // 輪廓顏色borderWidth: 4, // 輪廓大小shadowBlur: 'none' // 輪廓陰影}},label: {show: false}},// {// type: 'line', // 折線(xiàn)圖// markLine: {// label: {// show: true,// position: 'right',// fontSize: 16,// // color: 'red',// formatter: function (params) {// // params = "考核指標(biāo):\n" + max*100 + "%";// params = max * 100 + "%";// return params// }// },// emphasis: {// label: {// show: true,// position: 'right',// fontSize: 16,// // color: 'red',// formatter: function (params) {// params = "考核\n指標(biāo)\n" + max * 100 + "%";// return params// }// },// lineStyle: { // 標(biāo)線(xiàn)樣式// width: 2,// color: 'red',// type: 'dashed'// },// },// // silent: true, // 不觸發(fā)鼠標(biāo)事件// symbol: 'none', // 標(biāo)線(xiàn)兩端樣式// lineStyle: { // 標(biāo)線(xiàn)樣式// width: 2,// color: 'red',// type: 'dashed'// },// data: [// { // 標(biāo)線(xiàn)數(shù)據(jù)// // lineStyle: {// // color: '#d8bb93'// // },// yAxis: max// // yAxis: this.echart1Data.ptcfkTarget && this.echart1Data.ptcfkTarget !== '' ?// // this.echart1Data.ptcfkTarget / 100 : '-', y 軸// }// ]// }// }]}barEcharts.setOption(option)

總結(jié)

以上是生活随笔為你收集整理的echarts实现水波球的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。