vue2+echarts实现水球+外层动效

实现效果

安装echarts-liquidfill

• 需要安装echarts-liquidfill！！！
• 需要安装echarts-liquidfill！！！
• 需要安装echarts-liquidfill！！！

安装命令

npm install echarts-liquidfill

版本如图：

实现代码

  data() {
    return {
      chart: null,
      timer: null,
      angle: 0, //角度，用来做简单的动画效果的
      list: [],
      /* this.list = [
          rate,
          {
            value: rate,
            direction: "left", //波浪方向
          },
        ]; */
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    clearInterval(this.timer); // 销毁前，清除时间定时器
    this.timer = null;
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.chart3Ref);
      let that = this;
      let option = {
        series: [
          {
            name: "内线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2.3,
                  startAngle: ((0 + that.angle) * Math.PI) / 180,
                  endAngle: ((90 + that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0ff",
                  fill: "transparent",
                  lineWidth: that.fontSize(0.03),
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "内线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2.3,
                  startAngle: ((180 + that.angle) * Math.PI) / 180,
                  endAngle: ((270 + that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0ff",
                  fill: "transparent",
                  lineWidth: that.fontSize(0.03),
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "外线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2.1,
                  startAngle: ((270 + -that.angle) * Math.PI) / 180,
                  endAngle: ((40 + -that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0ff",
                  fill: "transparent",
                  lineWidth: that.fontSize(0.03),
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "外线",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2.1,
                  startAngle: ((90 + -that.angle) * Math.PI) / 180,
                  endAngle: ((220 + -that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0ff",
                  fill: "transparent",
                  lineWidth: that.fontSize(0.03),
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "线头点",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;
              let point = that.getCirlPoint(x0, y0, r, 90 + -that.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 5,
                },
                style: {
                  stroke: "#0ff", //绿
                  fill: "#0ff",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "线头点",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;
              let point = that.getCirlPoint(x0, y0, r, 270 + -that.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 5,
                },
                style: {
                  stroke: "#0ff", //绿
                  fill: "#0ff",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: this.list, // data个数代表波浪数
            backgroundStyle: {
              borderWidth: this.fontSize(0.01),
              color: "rgba(62, 208, 255, 1)", // 球体本景色
            },
            amplitude: "6  %", //波浪的振幅
            // 修改波浪颜色
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#6CDEFC",
                  },
                  {
                    offset: 0,
                    color: "#429BF7",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                formatter: function (params) {
                  return params.value * 100 + " %";
                },
                textStyle: {
                  fontSize: this.fontSize(0.3),
                  color: "#fff",
                },
              },
            },
            backgroundStyle: {
              borderWidth: that.fontSize(0.01),
              color: "transparent",
            },
            outline: {
              show: true,
              itemStyle: {
                borderColor: "#0ff",
                borderWidth: that.fontSize(0.02),
              },
              borderDistance: that.fontSize(0.03),
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["72%", "75%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 0,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#00AFFF",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
      this.timer = setInterval(() => {
        this.draw();
      }, 100);
    },
    
    getCirlPoint(x0, y0, r, angle) {
      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },

    draw() {
      this.angle = this.angle + 3;
      let option = this.chart.getOption();
      // console.log(option, "option");
      option.series[6].data = this.list;
      this.chart.setOption(option);
    },
  },