【Echarts动态排序图,series使用背景色更新动画,背景底色不同步跟随柱子动画】大家有没有解决方案
echarts动态排序图背景色动画不同步
echarts试一试
series下面添加了showBackground属性,动画时底色背景不同步跟随柱图
showBackground: true,
backgroundStyle: {
borderRadius: 9,
color: 'RGB(255,199,91, 0.2)'
}
const data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
option = {
xAxis: {
max: 'dataMax'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 4 // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
valueAnimation: true
},
showBackground: true,
backgroundStyle: {
borderRadius: 9,
color: 'RGB(255,199,91, 0.2)'
},
animation: true
}
],
legend: {
show: true
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animation: true
};
function run() {
for (var i = 0; i < data.length; ++i) {
if (Math.random() > 0.9) {
data[i] += Math.round(Math.random() * 2000);
} else {
data[i] += Math.round(Math.random() * 200);
}
}
myChart.setOption({
series: [
{
type: 'bar',
data
}
]
});
}
setTimeout(function () {
run();
}, 0);
setInterval(function () {
run();
}, 2000);