Echarts 数据未同步渲染怎么办-设置数据动态更新

三猪技术团队

1. 数据动态更新问题

  • 问题 : 当我们需要动态频繁的根据数据去变动图表的时候会出现以下问题
  1. 数据发生变化,可图表却没有重新渲染
  2. 数据错乱问题
  3. 大量数据导致图表样式错乱bug
步骤一

首先模拟大量数据进入 渲染图表。此处我们使用websocket进行模拟(正在做大数据可视化的小伙伴可以用到)

步骤二

新建图表子组件 配置echarts 图表

步骤三

通过 onmessage方法监听到接受的数据后 传递给图表子组件。子组件通过 watch 监听的方式 监听数据流

图表如下

根据如上基础配置可以看出 每当新的一条数据进来时 都会重复调用 this.lineonedata(); 这个方法 使得图表一直处于刷新状态

当数据流进入过大的时候 依然会导致卡顿问题

  • 解决方法:根据如上问题 有两种普遍解决方法如下
    1. 使用 echarts.dispose() 方法 将之前的实例删除掉 然后使用 echarts.init() 方法重新创造一个新的实例。

echarts.dispose()

描述:

释放图表实例,释放后实例不再可用。

    1. 执行 echarts.clear() 方法 清空当前实例,会移除当前实例的组件和图表。再重新使用 setOptions()

我们来看看 官方的描述

可以看到二者之间的区别 echarts.dispose() 方法会将整个 echarts实例进行销毁。需要重新使用 echarts.init() 方法才会重新刷新数据

执行 echarts.clear() 方法 只会清空当前实例的内容,并不会进行销毁 。我们只需要 重新使用setOption() 就可以 看到最新的数据。

以上两种解决方法 是可以看见图表重新进行渲染 达到想要的目的 。

但是当数据量特别巨大,如websocket每秒进入上百条数据时。echarts图表仍然会有略微科顿

  • 解决方法1 :当数据量大 首先将 animation 设置为 false,因为 大部分类型图表都会提供一个开关动画的参数,把它关掉图表会有一个快速闪烁的动作。

  • 解决方法2 : 将setOptions() 第二个参数设置为 true
当修改setOption值的时候,我们异步回来的数据层级比较深的情况下,需要echarts重绘,否则不会如愿显示主要体现,你增加数据可以,但是减少数据,发现视图上还是保持着最多数据的展示效果,很纳闷,明明可以通过移步修改数据,为何增加可以绘制地图而减少好像就什么都没有做

解决方法如下:

阅读 1.6k

想你所想争取给你最全面的亚马逊开发知识交流通道x118422

6 声望
4 粉丝
0 条评论

想你所想争取给你最全面的亚马逊开发知识交流通道x118422

6 声望
4 粉丝
文章目录
宣传栏