可视化 | echarts饼图改编

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}}}}]});}