erwei1983
2021-06-12 15:42
采纳率: 33.3%
浏览 186
已采纳

echarts 实现动态数据展示效果。

我现在正在用datav+vue 实现一个大屏展示的系统,我做的一个折线图,现在想实现动态显示效果,我测试了一下,因为数据是从服务端取到的,我做了一个定时器每隔一段时间就去服务器端取一次数据,但是每次都是折线图整个刷新闪一下,然后在显示新的,根本实现不了那种不闪的动画效果。我如果不通信然后把数据随机set进去就可以实现,但是不通信也不行啊,大家有没有什么好的实现方案啊

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 小P聊技术 2021-06-12 17:47
    已采纳

    你的意思是不要刷新效果是吗,正常他会有过渡动画的。

    去看了下官网可以加这个配置:

    animation 是否开启动画。一般不做设置。

    animation: true, 默认为true,如果设置了false,那么刷新的时候不会有动画效果,另外这个只要是bool值就行。
    比如: animation: 1>=1, —> true, || animation: 1<1, —> false,

     

    option里面

    option = {
    
    animation:false
    
    }
    
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • erwei1983 2021-06-12 19:16
    const setData = () => {
          cdata.category = [];
          cdata.lineData = [];
          for (var i = 0; i < 10; i++) {
            cdata.category.push((Math.random() * 10 + 40).toFixed(3));
            cdata.lineData.push((Math.random() * 20 + 4).toFixed(3));
        }}

    这样的话就是有动画效果,看不出数据是刷新的,然后折现会变化。而如果数据是从后台服务器取出来的:

    const setData = () => {
          cdata.category = [];
          cdata.lineData = [];
           axios.post('http://localhost:8080/xy/list').then(
              function (response) {         
                for (var i = 0; i < response.data.length; i++) {
                     cdata.category.push(response.data[i].xy);
                     cdata.lineData.push(response.data[i].cd);
                }
              }
            );
        }

    这样两端代码用定时器调用,产生的效果不一样啊,后一种是明显是重新刷新的图表,而前一种就看不出来刷新,折线一直在动,第二种就是去服务器去一次数据闪一下,刷新图表,效果太不好了。

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题