记录vue项目用到的水波纹 百分比 进度

参考资料

 echarts-liquidfill  git地址：gitcode.net/mirrors/eco…

示例：www.isqqw.com/viewer?id=2…

前置条件，安装echarts，同时还需要安装echarts-liquidfill

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

npm install echarts
npm install echarts-liquidfill

引入

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

初始化图形方法

initChart() {
      this.chart = this.$echarts.init(document.getElementById("chart"));
      const option = {
        tooltip: {
          show: true,
        },
        series: [
          {
            name: "下载打包进程",
            type: "liquidFill",
            radius: "118px",
            data: this.proportion,
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(4, 33, 77, .3)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(4, 33, 77, .6)",
                  },
                  {
                    offset: 0,
                    color: "rgba(4, 33, 77, .9)",
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(50,115,233, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(50,115,233, .5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(50,115,233, 1)",
                    },
                  ],
                  global: false,
                },
              },
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(0,181,0, 0.8)",
                  },
                  {
                    offset: 0.75,
                    color: "rgba(0,181,0, .5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(0,181,0, 1)",
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
          },
        ],
        graphic: [
          {
            type: "group",
            left: "center",
            children: [
              {
                type: "text",
                z: 100,
                left: "center",
                top: "35",
                style: {
                  fill: "#fff",
                  text: this.fraction,
                  font: "24px Microsoft YaHei",
                },
              },
              {
                type: "text",
                z: 100,
                left: "center",
                top: "85",
                style: {
                  fill: "#fff",
                  text: "合并报告进程",
                  font: "12px Microsoft YaHei",
                },
              },
            ],
          },
        ],
      };

      this.chart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },