账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    用echarts 的setOption更新现有数据后,为什么没有动画效果了?
    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
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 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不会执行动画的回调函数。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部