记录vue项目用到的水波纹百分比进度-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录vue项目用到的水波纹百分比进度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echarts-liquidfill git地址：mirrors / ecomfe / echarts-liquidfill · GitCode

示例：echarts图表集

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

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

npm install echarts
npm install echarts-liquidfill

在main.js中引入

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

初始化图形方法文章来源地址https://www.toymoban.com/news/detail-600195.html

    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();
      });
    },

到了这里，关于记录vue项目用到的水波纹百分比进度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！