可视化
- 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
- 整合地图,3d词云and饼图
更多推荐
可视化
发布评论