Vue项目使用水球图（Echarts、echarts-liquidfill)

注意：echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

npm引入：
npm install echarts
npm install echarts-liquidfill

cdn引入：
<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>

 两个文件可以在官方github上下载 https://github.com/ecomfe/echarts-liquidfill/

<template>
  <div class="home">
    <div id="WaterdropCharts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import echartsLiquidfill from "echarts-liquidfill"; //在这里引入水球图
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var mycharts = echarts.init(document.getElementById("WaterdropCharts"));
      const dataOption = {
        value: 0.6,
        itemStyle: {//渐变水球颜色
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "pink",
            },
            {
              offset: 1,
              color: "skyblue",
            },
          ]),
        },
      };
      var option = {
        series: [
          {
            type: "liquidFill",

            // 这三个属性值设置为false静止的波浪
            // waveAnimation: false, //静止的波浪效果
            animationDuration: 1000, // 波浪初始上涨时间
            // animationDurationUpdate: 0,//静止的波浪效果
            // 这三个属性值设置为false静止的波浪

            amplitude: "5%", //振幅波浪大小
            name: "一级预警",
            data: [dataOption],
            waveLength: "60%",//波浪长度
            outline: {
              //隐藏轮廓
              show: false,
            },
            label: {
              //字体内容、字体颜色、字体大小属性
              formatter: "12",
              color: "#fff",
              fontSize: 30,
            },
            backgroundStyle: {
              //水球图背景
              color: "#F0F0F0",
            },

            // color: ["#F87900"],
          },
        ],
        tooltip: {
          //鼠标滑过展示数据
          show: false,
        },
      };
      mycharts.setOption(option);
    },
  },
};
</script>
<style>
#WaterdropCharts {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
</style>