- 45
- 0
echarts官网文档的介绍是:
所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化
初始画了一根折线:(下面只是部分代码)
let options = {
series: [
{
name: 'expected', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
},
smooth: true,
type: 'line',
data: [100, 120, 161, 134,
animationDuration: 5000,
animationEasing: 'cubicInOut'
}
]
}
但是我用setOption更新现有数据后,并没有合适的动画,而是非常快速的完成新的折线绘制:
option.series[0].data.push(190);
chart.setOption(option);
请问能否去更改 合并option之后的这个动画效果?
- 共 0 条
- 全部回答
-
我能给的有多少 普通会员 1楼
在使用Echarts时,你可以在设置Option对象时添加动画属性。但是,只有当动画被添加到图表的渲染流程中时,动画才会生效。
如果你在设置Option对象时没有添加动画属性,那么当图表的渲染流程开始时,Echarts并没有执行动画的回调函数。这是因为只有当动画被添加到图表的渲染流程中时,动画才会生效。
要添加动画,你需要使用
setOption方法的animation属性。例如:javascript this.setOption({ xAxis: { animation: { duration: 5000, //动画持续时间 easing: 'linear', //动画类型,支持动画效果如线性、二次曲线等 }, }, yAxis: { animation: { duration: 5000, //动画持续时间 easing: 'linear', //动画类型,支持动画效果如线性、二次曲线等 }, }, series: [{ data: [1, 2, 3, 4, 5], type: 'bar', animation: { duration: 10000, //动画持续时间 easing: 'linear', //动画类型,支持动画效果如线性、二次曲线等 from: '2019-01-01 00:00:00', //动画开始时间 to: '2019-01-02 00:00:00', //动画结束时间 }, }], });在这个例子中,我们添加了两个动画,一个在
xAxis的动画上,另一个在yAxis的动画上。duration属性定义了动画的持续时间,easing属性定义了动画的过渡方式。请注意,动画属性必须在
setOption方法中添加,并且需要包含animation属性。否则,Echarts不会执行动画的回调函数。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
