vue中实现水波图（echarts-liquidfill，echarts）

 echarts-liquidfill查看官方文档

安装

npm install echarts --save
npm install echarts-liquidfill --save

vue main.js 中注册

import echarts from 'echarts'  //引入echarts
import 'echarts-liquidfill'

组件中使用

<template>
  <div style="width: 400px; height: 400px" ref="hygrometer"></div>
</template>
<script>
export default {
  data() {},
  mounted() {
    this.drawLiquidfill();
  },
  methods: {
    drawLiquidfill() {
      let percentage = "60%";
      // 基于准备好的dom，初始化echarts实例
      let hygrometer = this.$echarts.init(this.$refs.hygrometer);
      // 使用指定的配置项和数据显示图表
      hygrometer.setOption({
        title: {
          text: "超越了" + percentage + "的本校教师",
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#333",
            fontWeight: "400",
            fontSize: 12,
          },
        },
        backgroundStyle: {
          clolor: "#fff",
        },
        series: [
          {
            // name: "睡了",
            type: "liquidFill",
            radius: "180px",
            data: [0.6],
            label: {
              normal: {
                // color: "rgba(0,0,0,0)",
                // insideColor: "rgba(0,0,0,0)",
                textStyle: {
                  fontSize: 20,
                  fontWeight: "bold",
                },
              },
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ["#328CDA"], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ["#9DC9FF"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],

            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: "#54B3FC",
                borderWidth: 3,
              },
            },
          },
        ],
      });
    },
  },
};
</script>

附： v-charts 中也有水球图https://v-charts.js.org/#/liquidfill