echarts饼图内容循环播放实现

效果展示

思路

先实现普通的饼图，再处理数据内容：使用for循环+延时器实现数据分割，数据处理好后再进行渲染。

难点

数据分割

代码实现

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
require("echarts/theme/blue"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  components: {},
  data() {
    return {
      chart: null,
      seriesList: [],
    };
  },
  watch: {},
  created() {
    this.seriesList = [
      { value: 57, name: "昆明" },
      { value: 21, name: "玉溪" },
      { value: 9, name: "红河" },
      { value: 9, name: "文山" },
      { value: 8, name: "版纳" },
      { value: 8, name: "楚雄" },
      { value: 7, name: "大理" },
      { value: 6, name: "保山" },
      { value: 8, name: "临沧" },
      { value: 6, name: "普洱" },
      { value: 5, name: "怒江" },
      { value: 5, name: "曲靖" },
      { value: 3, name: "瑞丽" },
      { value: 2, name: "迪庆" },
      { value: 1, name: "德宏" },
      { value: 1, name: "丽江" },
      { value: 1, name: "昭通" },
    ];
    //设置了一个定时器，65秒执行一次
    this.timer = setInterval(() => {
      this.initChart();
    }, 65000);
  },
  mounted() {
    this.initChart();
  },
  destroyed() {
    clearInterval(this.timer);
  },

  computed: {},

  methods: {
    initChart() {
      const seriesListCount = this.seriesList;
      const myChart = this.$echarts.init(this.$el, "blue");

      const option = {
        title: {
          x: "left",
          y: 1,
          text: "作业总数：",
          textStyle: {
            color: "#40c2ff",
            fontSize: "15",
            fontFamily: "微软雅黑",
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000", // 自定义文字颜色
            fontSize: 16, // 自定义文字大小
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000", // 自定义文字颜色
            fontSize: 16, // 自定义文字大小
          },
          formatter: "<strong>作业总数</strong> <br/>{b} : {c} ",
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["0", "70%"],
            center: ["45%", "50%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  textStyle: {
                    fontSize: "12",
                    color: "#fff",
                  },
                  formatter: "{b} : {c}",
                },
                labelLine: {
                  show: false, // 是否显示视觉引导线。
                  length: 10, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                  length2: 0, // 视觉引导项第二段的长度。
                  lineStyle: {
                    // 视觉引导线的样式
                    color: "#fff",
                    width: 1,
                  },
                },
              },
            },
            data: this.seriesList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //for循环延迟执行;
      if (seriesListCount.length > 0) {
        for (var j = 0; j < seriesListCount.length - 4; j++) {
          (function (j) {
            setTimeout(function () {
              let i = j + 5;
              let sss = seriesListCount;
              const sliceA = sss.slice(j, i);
              option.series[0].data = sliceA;
              myChart.setOption(option);
              if (j == seriesListCount.length - 5) {
                j = 0;
              }
            }, 5000 * j);
          })(j);
        }
      }

      myChart.setOption(option, true);
    },
  },
};
</script>
<style lang='scss' scoped>
</style>