ECharts之 饼图 外圈Pie -- 旋转动画

 

要写两个div让最外层div旋转起来

代码直接复制粘贴，，本博主良心大大滴好

<template>
  <div class="pie">
    <div id="innerCircle"></div>
    <div id="margin"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: '',
  props: {},
  data() {
    return {
      numList: { num1: 70, num2: 20, num3: 100 }
    };
  },
  mounted() {
    this.innerCircle();
    this.margin();
  },
  methods: {
    /**内圆 */
    innerCircle() {
      const myChart = echarts.init(document.getElementById('innerCircle'));
      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: '#F8FCFF',
                      align: 'center',
                      fontSize: 17,
                      fontWeight: 'bold',
                      fontFamily: '方正粗倩_GBK'
                    },
                    b: {
                      color: '#F8FCFF',
                      align: 'center',
                      fontSize: 12,
                      padding: [0, 0, 5, 0]
                    },
                    c: {
                      fontSize: 14,
                      fontFamily: '方正粗倩_GBK',
                      fontWeight: 'bold'
                    }
                  },
                  formatter: function (params) {
                    return '{b|金融}' + '\n{a|' + params.value + '}' + ' {c|%}';
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'normal',
                    color: '#fff'
                  }
                }
              },
              itemStyle: {
                borderWidth: 1,
                borderRadius: '50%',
                color: color
              }
            },
            {
              value: 90,
              itemStyle: {
                normal: {
                  color: '#283741',
                  borderWidth: 1,
                  borderRadius: '50%'
                }
              }
            }
          ]
        };
        if (i == 0) {
          series.data[0].value = this.numList.num1; //  第一个内圆
        } else if (i == 1) {
          series.center = ['43%', '50%']; //  第二个内圆
          series.data[0].value = this.numList.num2;
        } else {
          series.center = ['75%', '50%']; //  第三个内圆
          series.data[0].value = this.numList.num3;
        }
        series.data[1].value = 100 - series.data[0].value;
        option.series.push(series);
      }
      myChart.setOption(option);
    },

    //**外边框 */
    margin() {
      const myChart = echarts.init(document.getElementById('margin'));
      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: 35,
              itemStyle: {
                normal: {
                  color: '#2F3F59',
                  borderWidth: 1
                }
              }
            },
            {
              value: 9,
              itemStyle: {
                normal: {
                  color: '#26A4D8',
                  borderWidth: 3,
                  borderRadius: '50%'
                }
              }
            },
            {
              value: 35,
              itemStyle: {
                normal: {
                  color: '#2F3F59',
                  borderWidth: 1
                }
              }
            },
            {
              value: 15,
              itemStyle: {
                normal: {
                  color: '#26A4D8',
                  borderWidth: 3,
                  borderRadius: '50%'
                }
              }
            }
          ]
        }; //  第一个外边框
        if (i == 1) {
          series.center = ['43%', '50%']; //  第二个外边框
        } else if (i == 2) {
          series.center = ['75%', '50%']; //  第三个外边框
        }
        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);
    }
  }
};
</script>

<style lang="scss" scoped>
.pie {
  position: relative;
}
#innerCircle {
  width: 400px;
  height: 96px;
}

#margin {
  top: 0px;
  width: 400px;
  height: 96px;
  position: absolute;
}

#echarts2 {
  width: 96px;
  height: 96px;
  margin-left: 40px;
}

#echarts3 {
  width: 96px;
  height: 96px;
  margin-left: 40px;
}
</style>