在Vue中使用水球图，并实现动态渲染改变颜色

第二步： 给水球图一个容器

<li>
	<div class="cpu d-f a-c">CPU使用率</div>
     <div class="line"></div>
     <div class="liquidfill-contain d-f a-c j-c">
     	<!-- 这里就是水球图的容器 -->
     	<div class="liquidfill" ref="cpu"></div>
     </div>
</li>

第三步： 在方法中写具体代码，直接贴

data() {
          
   
    return {
          
   
      value1: 0.25,
      websocket: null,
      timer: null,
    };
  },
methods: {
          
   
    myCharts1() {
          
   
      let myChart = echarts.init(this.$refs.cpu);
      let option = {
          
   
        series: [
          {
          
   
            type: "liquidFill",
            radius: "95%",
            waveAnimation: true,
            data: [
              {
          
   
                value: this.value1,
                direction: "left",
                itemStyle: {
          
   
                  normal: {
          
   
                  //这里就是根据不同的值显示不同球体的颜色
                    color: eval(
                      "if(this.value1<0.3){rgba(0, 159, 232, 1)}else if(this.value1<0.7){rgba(250, 173, 20, 1)}else{rgba(248, 9, 65, 1)}"
                    ),
                  },
                },
              },
            ],
            outline: {
          
   
              //   show: true, //是否显示轮廓 布尔值
              borderDistance: 1, // 外部轮廓与图表的距离 数字
              itemStyle: {
          
   
              //这里就是根据不同的值显示不同边框的颜色
                borderColor: eval(
                  "if(this.value1<0.3){rgba(0, 159, 232, 1)}else if(this.value1<0.7){rgba(250, 173, 20, 1)}else{rgba(248, 9, 65, 1)}"
                ), // 边框的颜色
                borderWidth: 3, // 边框的宽度
                // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: #000 //外部轮廓的阴影颜色
              },
            },
            itemStyle: {
          
   
              opacity: 0.9, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
            },
            backgroundStyle: {
          
   
              color: "#fff", // 图表的背景颜色
            },
            label: {
          
   
              // 数据展示样式
              show: true,
              color: "#000",
              insideColor: "#fff",
              fontSize: 20,
              fontWeight: 400,
              align: "center",
              baseline: "middle",
              position: "inside",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  //这里监听值的变化，如果有变化就重绘，因为我是websocket传值过来的不是写死的页面
   watch: {
          
   
    value1(val, oldVal) {
          
   
      this.value1 = val;
      setTimeout(() => {
          
   
        this.myCharts1();
      });
    },
  },

到这里就差不多啦，欢迎留言