效果:数据随着时间的推移缓慢增加(不抖屏)
getData(percent) {
return [{
value: percent,
itemStyle: {
normal: {
color: '#46c9a2'
}
}
}, {
value: 100 - percent,
itemStyle: {
normal: {
color: '#d3daf5'
}
}
}];
}
draw() {
let { pieData } = this.props;
// 基于准备好的dom,初始化echarts实例
var $pieChart = document.getElementById('pieChart'),
myChart;
if ($pieChart) {
myChart = Echarts.init($pieChart);
} else {
return;
}
var percent = 1;
let option = {
title: {
text: (percent * 1) + '%',
x: 'center',
y: 'center',
textStyle: {
color: '#5f6988',
fontSize: 28,
}
},
series: [{
type: 'pie',
radius: ['50%', '60%'],
silent: true,
label: {
normal: {
show: false,
}
},
data: [],
animation: false
}
]
};
myChart.setOption(option);
setInterval(() => {
if (percent == 100) {
percent = 100;
} else {
++percent;
}
myChart.setOption({
title: {
text: percent + '%'
},
series: [{
type:'pie',
name: 'main',
data: this.getData(percent)
}]
})
}, 50)
}