echarts做水滴图；解决[echarts] unknown series liquidfill 水球加载问题

一份echarts示例代码，包含水滴图

直接在echarts里使用水滴图liquidfill会报错[echarts] unknown series liquidfill
解决方案：需要下载echarts-liquidfill依赖
echarts-liquidfill@2兼容echarts@4;
echarts-liquidfill@3兼容echarts@5;
例如：我的版本如下：

    "echarts": "^5.2.2",
    "echarts-liquidfill": "^3.1.0",

1.安装依赖

npm install echarts-liquidfill@3.1.0 -S

2.在对用使用水滴图页面引入js

import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入

3.使用水滴图配置，代码可以直接复制

<template>
  <div class="dlsFirst">
    <div style="padding: 50px;">水滴图</div>
    <div class="one_box" id="one_box" ref="one_box"></div>
  </div>
</template>

<script>
import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入
export default {
  data() {
    return {
      chartHeight1: "300px",
      option2: {}
    };
  },
  mounted() {
    const myChart = this.$echarts.init(this.$refs.one_box);
    //调用resize方法给图表设置动态宽高
    myChart.resize({
      height: this.chartHeight1
    });
    this.option2 = {
      backgroundColor: "#485C6D", //背景色
      series: [
        {
          type: "liquidFill", //水位图
          radius: "80%", //显示比例
          center: ["50%", "50%"], //中心点
          amplitude: 20, //水波振幅
          data: [0.5, 0.5, 0.5], // data个数代表波浪数
          color: ["#23cc72"], //波浪颜色
          backgroundStyle: {
            borderWidth: 6, //外边框
            borderColor: "#23cc72", //边框颜色
            color: "#485C6D" //边框内部填充部分颜色
          },
          label: {
            //标签设置
            position: ["50%", "30%"],
            formatter: "50%", //显示文本,
            fontSize: "52px", //文本字号,
            color: "#fff"
          },
          outline: {
            show: false //最外层边框显示控制
          }
        }
      ]
    };

    myChart.setOption(this.option2);
  },
};
</script>

<style lang="less" scoped></style>

4.重启项目即可