Echarts饼图-实现资源对比+旋转动画

本次实现的是一个饼图，外圈两个圆，转动效果 + 资源对比显示。

思路：写三个div，让外圈两个旋转起来，如果有多个，可以增加div即可，颜色和圆大小都可以修改，根据自己需求来定，通过定时器可以控制旋转的快慢，通过resize属性来监听图形的改变而变化。

实现效果静态图片：

整体代码如下：

<template>
  <div class="container">
    <div class="pie">
      <div id="pieChart"></div>
      <div id="innerMargin"></div>
      <div id="outerMargin"></div>
    </div>
  </div>
</template>
   
  <script>
import * as echarts from "echarts";
export default {
  name: "",
  props: {},
  data() {
    return {
      data: { value: 50 }, // 数据
    };
  },
  mounted() {
    this.pieChart();
    this.innerMargin();
    this.outerMargin();
  },
  methods: {
    /**内圆 */
    pieChart() {
      const myChart = echarts.init(document.getElementById("pieChart"));
      let color = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#25ABD6", // 0% 处的颜色
          },
          {
            offset: 0.17,
            color: "#2494D0", // 100% 处的颜色
          },
          {
            offset: 0.9,
            color: "#29C0D8", // 100% 处的颜色
          },
          {
            offset: 1,
            color: "#27B3D5", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      };
      const option = { series: [] };
      for (let i = 0; i < 3; i++) {
        let series = {
          name: "第一个圆环",
          type: "pie",
          clockWise: false,
          radius: [28, 38],
          hoverAnimation: false,
          itemStyle: {
            borderRadius: 60,
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          center: ["12%", "50%"],
          data: [
            {
              value: 10,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#BBFFFF",
                      align: "center",
                      fontSize: 17,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#BBFFFF",
                      align: "center",
                      fontSize: 12,
                      padding: [0, 0, 5, 0],
                    },
                  },
                  formatter: function (params) {
                    return "{b|虚拟资源}" + "\n{a|" + params.value + "}";
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                borderWidth: 1,
                borderRadius: "50%",
                color: color,
              },
            },
            {
              value: 90,
              itemStyle: {
                normal: {
                  color: "#072c6d",
                  borderWidth: 1,
                  borderRadius: "50%",
                },
              },
            },
          ],
        };
        if (i == 0) {
          series.data[0].value = this.data.value; //  第一个内圆
        }
        series.data[1].value = 100 - series.data[0].value;
        option.series.push(series);
      }
      myChart.setOption(option);
    },

    //**内边框 */
    innerMargin() {
      const myChart = echarts.init(document.getElementById("innerMargin"));
      const option = { series: [] };
      for (let i = 0; i < 3; i++) {
        let series = {
          name: "内圈小狐线",
          type: "pie",
          radius: ["46", "48"],
          center: ["12%", "50%"],
          startAngle: 90, //默认90，起始角度，支持范围[0, 360]
          hoverAnimation: false,
          itemStyle: {
            borderRadius: 40,
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 10,
              itemStyle: {
                normal: {
                  color: "#4682B4",
                  borderWidth: 1,
                },
              },
            },
            {
              value: 5,
              itemStyle: {
                normal: {
                  color: "#072c6d",
                  borderWidth: 3,
                  borderRadius: "25%",
                },
              },
            },
            {
              value: 10,
              itemStyle: {
                normal: {
                  color: "#4682B4",
                  borderWidth: 1,
                },
              },
            },
            {
              value: 5,
              itemStyle: {
                normal: {
                  color: "#072c6d",
                  borderWidth: 3,
                  borderRadius: "25%",
                },
              },
            },
            {
              value: 10,
              itemStyle: {
                normal: {
                  color: "#4682B4",
                  borderWidth: 1,
                },
              },
            },
            {
              value: 5,
              itemStyle: {
                normal: {
                  color: "#072c6d",
                  borderWidth: 3,
                  borderRadius: "25%",
                },
              },
            },
            {
              value: 10,
              itemStyle: {
                normal: {
                  color: "#4682B4",
                  borderWidth: 1,
                },
              },
            },
            {
              value: 5,
              itemStyle: {
                normal: {
                  color: "#072c6d",
                  borderWidth: 3,
                  borderRadius: "25%",
                },
              },
            },
          ],
        };
        option.series.push(series);
      }
      // 用定时器让他旋转起来
      setInterval(() => {
        for (let i = 0; i < option.series.length; i++) {
          const element = option.series[i];
          element.startAngle = element.startAngle - 5;
        }
        myChart.setOption(option);
      }, 100);
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
    //**外边框 */
    outerMargin() {
      const myChart = echarts.init(document.getElementById("outerMargin"));
      const option = { series: [] };
      for (let i = 0; i < 3; i++) {
        let series = {
          name: "最外圈小狐线",
          type: "pie",
          radius: ["50", "52"],
          center: ["12%", "50%"],
          startAngle: 90, //默认90，起始角度，支持范围[0, 360]
          hoverAnimation: false,
          itemStyle: {
            borderRadius: 40,
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 10,
              itemStyle: {
                normal: {
                  color: "#4682B4",
                  borderWidth: 1,
                },
              },
            },
          ],
        };
        option.series.push(series);
      }
      // 用定时器让他旋转起来
      setInterval(() => {
        for (let i = 0; i < option.series.length; i++) {
          const element = option.series[i];
          element.startAngle = element.startAngle - 5;
        }
        myChart.setOption(option);
      }, 100);
      window.addEventListener("resize", () => {
        if (myChart) {
          myChart.resize();
        }
      });
    },
  },
};
</script>
   
  <style  scoped>
.container {
  background: #ddd;
  height: 100vh;
  padding: 30px;
}
.pie {
  position: relative;
}
#pieChart {
  width: 400px;
  height: 96px;
}

#innerMargin {
  top: 0px;
  width: 400px;
  height: 96px;
  position: absolute;
}
#outerMargin {
  top: 0px;
  width: 400px;
  height: 96px;
  position: absolute;
}
</style>