echarts 可能是水球图最完整的属性注解 高度定制化 加入定时刷新动态数据

本水球图注释结合项目，对水球图的深度定制化，牵涉到的属性较多，加入定器刷新动态数据；
步骤：
1.yarn add echarts -s
2. yarn add echarts-liquidfill -s
注意：
1.定时器是异步加载的，所以如下写法：

this.time0001=setInterval(async()=>{
      this.time0001_out2= await setTimeout(async()=>{
       await this.fun();
      },1000)//数据清空时到加载新数据的间隔
        this.mydata=[0,0,0];
        this.drawChart(this.myChart)
    },20000)//多少时间执行一次

2.当然注意清除定时器（beforeDestroy生命周期中）：

 beforeDestroy(){
    clearInterval(this.time0001) //组件销毁  清除定时器（做定时刷新时一定要有）
    clearInterval(this.time0001_out2)
  },

附上完整代码：

import echart from 'echarts'
import liquidfill from 'echarts-liquidfill'
export default {
  props: {
    chartinfo: {
      default: ''
    },
    percentage: {
      default: 3
    },
    show: {
      default: false
    },
    cManageObj: {
      default: null
    }
  },
  data() {
    return {
      // show: true,
      time: 0,
      myChart: null,
      bg: this.color1,
      mydata: [0.1, 0.1, 0.1],
      man: true,
      color: [
        'rgba(110, 170, 234, 0.774)',
        'rgba(177, 208, 241, 0.363)',
        'rgba(9, 113, 240, 0.178)'
      ],
      textColor: '#0072D8',
      textcolor: ['#0072D8', '#00B7E5', 'rgb(3, 247, 194)'],
      shuiboColor: [
        [
          'rgba(110, 170, 234, 0.3)',
          'rgba(177, 208, 241, 0.3)',
          'rgba(9, 113, 240, 0.3)'
        ],
        [
          'rgba(115, 207, 253, 0.4)',
          'rgba(190, 227, 245, 0.4)',
          'rgba(44, 176, 241, 0.26)'
        ],
        [
          'rgba(2, 109, 70, 0.192)',
          'rgba(206, 241, 229, 0.3)',
          'rgba(2, 109, 70, 0.192)'
        ]
        // [
        //     {
        //   type: 'linear',//背景图颜色线性渐变
        //   x: 0, // 左上角x
        //   y: 0, // 左上角y
        //   x2: 0, // 右下角x
        //   y2: 1, // 右下角y
        //   colorStops: [
        //     {
        //       offset: 0,
        //       color: 'rgba(18, 189, 140,0.3)' // 100% 处的颜色
        //     },
        //     {
        //       offset: 0.2,
        //       color: 'rgba(18, 189, 140,0.3)' // 100% 处的颜色
        //     },
        //     {
        //       offset: 1,
        //       color: 'rgba(18, 189, 140,0.3)' // 0% 处的颜色
        //     }
        //   ],
        //   global: false // 缺省为 false
        // },
        // ],
      ],
      color1: {
        type: 'linear', //背景图颜色线性渐变
        x: 0, // 左上角x
        y: 0, // 左上角y
        x2: 0, // 右下角x
        y2: 1, // 右下角y
        colorStops: [
          {
            offset: 0,
            color: 'rgba(4, 209, 245, 0.548)' // 100% 处的颜色
          },
          {
            offset: 1,
            color: 'rgb(6, 109, 245)' // 0% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      color2: {
        type: 'linear', //背景图颜色线性渐变
        x: 0, // 左上角x
        y: 0, // 左上角y
        x2: 0, // 右下角x
        y2: 1, // 右下角y
        colorStops: [
          {
            offset: 0,
            color: 'rgba(22, 241, 223, 0.582)' // 100% 处的颜色
          },
          {
            offset: 1,
            color: 'rgb(6, 197, 245)' // 0% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      color3: {
        type: 'linear', //背景图颜色线性渐变
        x: 0, // 左上角x
        y: 0, // 左上角y
        x2: 0, // 右下角x
        y2: 1, // 右下角y
        colorStops: [
          {
            offset: 0,
            color: 'rgba(32, 245, 181, 0.562)' // 100% 处的颜色
          },
          {
            offset: 1,
            color: 'rgb(11, 192, 144)' // 0% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    }
  },
  watch: {
    // show(){
    //   ++this.time;
    // },
    'chartinfo.arr'(newval, olddata) {
      // console.log(newval)
    }
  },
  mounted() {
    this.fun()
    switch (this.chartinfo.id) {
      case 1:
        this.bg = this.color1
        this.color = this.shuiboColor[0]
        this.textColor = this.textcolor[0]
        break
      case 2:
        this.bg = this.color2
        this.color = this.shuiboColor[1]
        this.textColor = this.textcolor[1]
        break
      case 3:
        this.bg = this.color3
        this.color = this.shuiboColor[2]
        this.textColor = this.textcolor[2]
        break
    }
    this.$emit('textcolor', this.textColor)
    // this.mydata = this.chartinfo.arr
    this.myChart = echart.init(this.$refs.chart)
    this.$nextTick(() => {
      this.drawChart(this.myChart)
    })
    this.time0001=setInterval(async()=>{
      this.time0001_out2= await setTimeout(async()=>{
       await this.fun();
      },1000)//数据清空时到加载新数据的间隔
        this.mydata=[0,0,0];
        this.drawChart(this.myChart)
    },20000)//多少时间执行一次
  },
  methods: {
    async fun() {
      await this.$store
        .dispatch('homeStore/initCloudManageStatistics')
        .then(res => {
          if (res.flag === 1) {
             let val = res.data.result
            // console.log(Number.parseFloat((val.used.cores / val.total.cores).toFixed(2)))
            this.$emit('moreurl1',res.data?res.data.moreurl:'')
            let bgf1 = val.used
              ? Number.parseFloat((val.used.cores / val.total.cores).toFixed(2))
              : 0;
            if (bgf1 === 0) {
              this.mydata[0] = 0.1
              this.mydata[1] = 0.07
              this.mydata[2] = 0.08
            } else if(bgf1>=1){
              bgf1=1;
              this.color=['rgba(241, 12, 12, 0.527)','rgba(243, 149, 149, 0.932)','rgba(245, 11, 11, 0.822)']
              this.mydata[0] = 1;
              this.mydata[1] = Math.abs(1-0.03);
              this.mydata[2] = Math.abs(1-0.06);
            }else {
              this.mydata[0] = val.used ? bgf1 : 0
              this.mydata[1] = Math.abs(this.mydata[0] - 0.03)
              this.mydata[2] = Math.abs(this.mydata[0] - 0.01)
            }
             this.drawChart(this.myChart)
          }
        })
    },
    drawChart(chart) {
      let vm = this
      let option = {
        backgroundColor: '#fff',
        series: [
          {
            type: 'liquidFill',
            data: this.mydata,
            radius: '100%',
            outline: {
              //外边框
              borderDistance: 0, //边框距离
              itemStyle: {
                //外边框样式
                borderWidth: 0, //边框宽度
                borderColor: '#ff9202', //边框颜色
                shadowBlur: 0, //波浪的阴影范围
                shadowColor: 'red' //波浪的颜色
              }
            },
            amplitude: 5, //振幅
            waveLength: '50%', //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            itemStyle: {
              shadowBlur: 5, //波浪的阴影范围
              shadowColor: this.textColor //波浪的颜色
            },
            backgroundStyle: {
              color: this.bg, //图表的背景颜色
              itemStyle: {
                shadowBlur: 100, //设置无用
                shadowColor: '#f60', //设置无用
                opacity: 1 //设置无用
              }
            },
            //水波纹的颜色（数组）
            color: this.color,
            // shape: "container", //水球形状
            label: {
              //水球中间的文字
              normal: {
                formatter: function() {
                  return vm.mydata[0] === 0.1
                    ? 0 + '%'
                    : (vm.mydata[0]* 100).toFixed()+ '%' //波纹中间的文字（60%）
                },
                position: ['50%', '40%'], //文字的位置
                textStyle: {
                  //文字样式
                  color: '#fff', //文字颜色
                  fontWeight: 'normal'
                },
                color: '#fff', //默认背景下的文字颜色
                insideColor: '#fff', //水漫过颜色
                fontSize: 26 //文字大小
              }
            }
          }
        ]
      }
      this.myChart.setOption(option)
    }
  },
   beforeDestroy(){
    clearInterval(this.time0001) //组件销毁  清除定时器（做定时刷新时一定要有）
    clearInterval(this.time0001_out2)
  },
}