用echarts更新数据setOption,折线的linear的动画效果不见了,直接变成绘画了,更新前的data数据是可以正常绘画的,并且我尝试了把所有能赋值动画的地方又都重新赋值了,也是没有用..
根据以前那个兄弟的提问和解答,我按照了相应的方案,但是并没有解决,clear()并不能解决这个问题.
官方的文档中有个说法"设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。**"如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。"**
所以需要各位兄弟姐妹帮忙看看是如何处理这个问题,让setOption后折线的添加 还是继续存在动画(渐入效果).
先做感谢!
详细见源码:
function randomData() {
now = new Date(+now + oneDay);
value = 100 + Math.random() * (8 - 100);
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
let data = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = Math.random() * 1000;
for (var i = 0; i < 20; i++) {
data.push(randomData());
}
option = {
animation: true,
animationEasing: 'linear',
animationDuration: 1000,
xAxis: {
type: 'time',
splitLine: {
show: false
},
boundaryGap: ['0%', '20%'],
axisLabel: {
formatter: (value, index) =>{
return 'test';
}
},
},
yAxis: {
type: 'value',
scale: true,
splitLine: {
show: false
}
},
series: [
{
name: 'teset',
type: 'line',
showSymbol: false,
data: data,
animation: true,
animationEasing: 'linear',
animationDuration: 1000,
},
],
animation: true,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animationDuration: 1000,
animationDurationUpdate: 1000,//150
};
setInterval(function () {
for (var i = 0; i < 1; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption({
animation: true,
animationEasing: 'linear',
animationDuration: 2000,
animationDurationUpdate: 2000,
stateAnimation:{
duration: 2000,
easing: 'linear',
},
series: [
{
data: data,
animation: true,
animationEasing: 'linear',
animationDuration: 2000,
animationDurationUpdate: 2000,
}
]
});
}, 2000);
animation: true,
animationEasing: 'linear',
animationDuration: 2000,
animationDurationUpdate: 2000,
这个你问啥写那么多边?