效果展示

思路

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

难点

数据分割

代码实现

<template><div :class="className" :style="{height:height,width:width}" />
</template><script>
require("echarts/theme/blue"); // echarts themeexport 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>