vue引入echarts-liquidfill水滴图并批量动态加载

实现需求：动态生成图表节点，生成的节点加载水滴图，水滴图根据不同的状态来显示是否有动画的效果。

1. 安装并引入echarts-liquidfill（需提前引入echarts）

npm install echarts-liquidfill  // 安装
import 'echarts-liquidfill'  // 组件引入

2. 文件代码

template:
<div class="station" v-for="(item, index) in list" :key="index">
<div :id="`chart${index}`"></div>  //根据索引动态生成id
</div>

methods:
// 获取数据
      getData() {
        getList().then(res => {
          this.list = res.data
          const dataList = res.data
          this.listLen = res.data.length

          if (this.listLen > 0) {
            // 节点渲染完再初始化图表，不然会报找不到节点的错误
            setTimeout(() => {
              this.initChart()
            }, 1000)
          }
        })
      },

// 初始化图表
      initChart() {
        this.list.forEach((val, index) => {
          let t = this;
          const myChart = this.$echarts.init(document.getElementById(`chart${index}`))
            // 三条波幅需要三组数据
          let data = [val.SerialNumber / 100, val.SerialNumber / 100, val.SerialNumber / 100]
          let color = '';
          if (val.Color) {
            color = val.Color
          } else {
            color = '717F91'
          }

          myChart.setOption({
            grid: {
              top: 0,
              left: 0,
              right: 0,
              bottom: 0
            },
            series: [{
              type: 'liquidFill',
              shape: 'container',
              // shape: 'path://M155,0 C204,0 253,5.33333333 302,16 L8,16 C57,5.33333333 106,0 155,0 Z',
              // center: ['50%', '50%'],
              radius: '100%',
              color: [],
              amplitude: val.TankState == 0 ? 0 : 10, // 波幅
              label: {
                show: false
              },
              backgroundStyle: {
                color: 'transparent',
              },
              outline: {
                show: false  // 外边框
              },
                // 设置颜色渐变
              color: [
                new t.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                    offset: 0,
                    color: '#' + color
                  },
                  {
                    offset: 0.3,
                    color: '#' + color
                  },
                  {
                    offset: 1,
                    color: "#ffffff"
                  }
                  ]
                )],
              data: data
            }],
          })
        })
      }