• echarts模板来源
  

📚改编点

🐇基本样式

• 去掉legend、label：show: false
• 背景透明：backgroundColor: "transparent"
• 去除功能标签
• 添加载入动态

  animationEasing: 'elasticOut',
  animationDelay: function (idx) {return Math.random() * 2000;}
  

• 统一设置颜色

  color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#e6534c'},{offset: 1, color: '#fff'},],global: false
  }
  

🐇添加中心文字循播放

• 首先给定graphic区域放文字

  var graphic = [{type: 'text',left: 'center',top: 'center',style: {text: getPieText(pieData, currentIndex),textAlign: 'center',fill: '#000',fontSize: 18,fontWeight: 'bold',}
  }];
  

• 获取文字，全称太长取前两个字（关注黑龙江！！）

  function getPieText(data, index) {var name = data[index].name.substring(0, 2);if(data[index].name == '黑龙江省'){name = data[index].name.substring(0, 3);}return name + ((data[index].value / getTotalValue(data) * 100).toFixed(2)) + '%';
  }function getTotalValue(data) {return data.reduce((total, current) => {return total + current.value;}, 0);
  }
  

• 每次更新

  function updateGraphic() {currentIndex = (currentIndex + 1) % pieData.length;myChart.setOption({graphic: [{type: 'text',left: 'center',top: 'center',style: {text: getPieText(pieData, currentIndex),textAlign: 'center',fill: '#000',fontSize: 18,fontWeight: 'bold',}}]});
  }
  

• 设置更新频率：setInterval(updateGraphic, 1500);

🐇添加中间文字对应图形变色

function updateGraphic() {currentIndex = (currentIndex + 1) % pieData.length;myChart.setOption({graphic: [{type: 'text',left: 'center',top: 'center',style: {text: getPieText(pieData, currentIndex),textAlign: 'center',fill: '#000',fontSize: 18,fontWeight: 'bold',}}],series: [{selected: currentIndex,itemStyle: {color: function(params) {return (params.dataIndex === currentIndex) ? '#AC2619' : {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: '#e6534c' },{ offset: 1, color: '#fff' }],global: false}}}}]});}

📚final