echarts实现水波球

需要下载"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.1
      let 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)