echarts水波球特效（附带外边框进度条）

echarts水波球特效（附带外边框进度条）

1.话不多说先上效果图

2.这里用到了echarts的liquidFill图表，需要加载liquidFill插件

npm i echarts-liquidFill --save

3.在main.js入口文件中引入

4.也可通过script标签形式引入

<script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js" type="text/javascript" charset="utf-8"></script>

5.option配置如下(可根据需要自行配置，大概的配置点已经注释出来了)

    chart.setOption({
        // backgroundColor: "#050038",
        title: {
          text: `总完成`,
          left: "center",
          top: "100",
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "rgb(0,0,0)"
          },
          subtext: `${this.progress.num}%`, //副标题
          subtextStyle: {
            fontWeight: "bold",
            fontSize: 40,
            color: "rgb(0,0,0)"
          }
        },

        series: [
          {
            type: "liquidFill", // 图表类型
            radius: "80%",
            center: ["50%", "50%"],
            data: [
              this.progress.num / 100,
              this.progress.num / 100,
              this.progress.num / 100
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "#F4F9FF"
            },
            label: {
              normal: {
                show: false, //不显示label  用副标题代替了
                formatter: (0.5 * 100).toFixed(0) + "%",
                textStyle: {
                  fontSize: 38,
                  color: "black"
                }
              }
            },
            color: [  //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(255,255,255,1)"
                  },
                  {
                    offset: 0,
                    color: "rgba(103,205,251,1)"
                  }
                ],
                globalCoord: false
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(187,248,252,0.5)"
                  },
                  {
                    offset: 0,
                    color: "rgba(30,134,245,1)"
                  }
                ],
                globalCoord: false
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(180,251,255,0.66)"
                  },
                  {
                    offset: 0,
                    color: "rgba(128,122,254,0.66)"
                  }
                ],
                globalCoord: false
              }
            ],
            outline: {
              show: false
            }
          },
          //外层线
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["92%", "93%"], //外层线粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: "#67CDFB"
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    // color: "#5886f0"
                  }
                }
              }
            ]
          },
          //进度线
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["90%", "95%"], //进度线粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: this.progress.num, //进度
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 2,
                    colorStops: [
                      // !! 在此添加渐变过程色 !!
                      { offset: 0, color: "#33E2ED" },
                      { offset: 1, color: "#807AFE" }
                    ]
                  }
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    // color: "#5886f0"
                  }
                }
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: 100 - this.progress.num,
                itemStyle: {
                  color: "rgba(0,0,0,0)"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "#050038"
                  }
                }
              }
            ]
          }
        ]
      });

（以上不足之处欢迎指出，共同进步）