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

最近有一个需求，需要展示水球图，参考https://blog.csdn.net/qq_42597536/article/details/90056775做了一些修改
Vue+websocket动态渲染水球图，并能够动态改变颜色

先展示效果图

下面介绍使用
第一步：
下载依赖
npm i echarts-liquidfill -s
然后在组件中引入
import echartsLiquidfill from ‘echarts-liquidfill’

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

<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();
      });
    },
  },
  

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