Vue Echarts实现水波图、水球图、水半球样式、圆形水进度条

1.安装：详见在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

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

2. 定义大小

<template>
  <div class="flex justify-center items-center">
    <div
      class="wave-chart"
      id="wavechart"
      :style="{ width: '160px', height: '160px' }"
    ></div>
  </div>
</template>

 3.引入echarts

import * as echarts from "echarts";
import "echarts-liquidfill";

4.实现代码

export default {
  props: { completionRate: Number },
  methods: {
    draw(newVal) {
      const wavechart = echarts.init(document.getElementById("wavechart"));
//ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：var chart = echarts.init(dom, 'dark');
      window.onresize = wavechart.resize;//在窗口大小改变时，相应的元素能够适应新的窗口尺寸。
      const option = {
        title: {
          text: [`{a|${newVal.toFixed(2)}}`, "%\n完成率"].join(""),//'\n'换行，主标题
          textStyle: {//主标题文字的样式
            rich: {//在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。例子：formatter: ['{a|这段文本采用样式a}','{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'].join('\n')
              a: {
                fontSize: 18,
              },
            },
            color: "#E2F8FF",
            fontSize: 16,
            lineHeight: 24,
            fontWeight: 400,
          },
          subtext: "Sub Title",//副标题
          subtextStyle: {fontSize: 20}//副标题文字的样式
          left: "center",
          top: "center",//title 组件离容器上侧的距离。
        },
        series: [
          {
            type: "liquidFill",
            center: ["50%", "50%"],
            radius: "98%",
            data: [newVal / 100],
            direction: "right", //波浪的方向｛left right none}
            outline: {
              show: true, //是否显示轮廓 布尔值
              borderDistance: 15, // 外部边框与图表的距离 数字
              itemStyle: {
                borderColor: {
                  // 边框的颜色
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: ["rgba(32, 128, 223,1)"], // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: ["rgba(62, 146, 226,0.7)"], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: ["rgba(6, 11, 30, 0.5)"], // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                borderWidth: 1, // 边框的宽度
                shadowOffsetX: 0,
                shadowOffsetY: 8,
                shadowColor: "#000000", //外部轮廓的阴影颜色
              },
            },
            itemStyle: {
              opacity: 0.8, // 波浪的透明度·
              shadowBlur: 0, // 波浪的阴影范围
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: ["rgba(153, 102, 255, 1)"], // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: ["rgba(102, 217, 255, 1)"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            backgroundStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: ["rgba(13, 25, 38,1)"], // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: ["rgba(34, 64, 94, 1)"], // 60% 处的颜色
                  },
                  {
                    offset: 0.93,
                    color: ["rgba(64, 127, 191, 1)"], // 93% 处的颜色
                  },
                  {
                    offset: 1,
                    color: ["rgba(51, 254, 255, 0.8)"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            label: {
              // 数据展示样式
              show: false,
            },
          },
        ],
      };
      wavechart.setOption(option);
    },
  },
  mounted() {
    this.draw(65);
  },
  watch: {
    completionRate: function (newVal) {
      this.draw(newVal);
    },
  },
};

 5.多个波浪水波图请参考https://www.cnblogs.com/tu-0718/p/16722158.html

6.官网：

echarts4 官网：Documentation - Apache ECharts

echarts5 官网：Apache ECharts

echarts-liquidfill 水球图插件官网: echarts-liquidfill - npm