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

1. 数据动态更新问题

• 问题 ： 当咱们须要动态频繁的根据数据去变更图表的时候会出现如下问题

  1. 数据发生变化，可图表却没有从新渲染
  2. 数据错乱问题
  3. 大量数据致使图表样式错乱bug

步骤一

首先模拟大量数据进入 渲染图表。此处咱们使用websocket进行模拟（正在作大数据可视化的小伙伴能够用到）

步骤二

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

步骤三

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

图表以下

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

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

• 解决方法：根据如上问题 有两种广泛解决方法以下
• 1. 使用 echarts.dispose() 方法 将以前的实例删除掉 而后使用 echarts.init() 方法从新创造一个新的实例。

echarts.dispose()

描述：

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

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

咱们来看看 官方的描述

能够看到两者之间的区别 echarts.dispose() 方法会将整个 echarts实例进行销毁。须要从新使用 echarts.init() 方法才会从新刷新数据

执行 echarts.clear() 方法 只会清空当前实例的内容，并不会进行销毁 。咱们只须要 从新使用setOption() 就能够 看到最新的数据。

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

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

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

• 解决方法2 : 将setOptions() 第二个参数设置为 true

当修改setOption值的时候，咱们异步回来的数据层级比较深的状况下，须要echarts重绘，不然不会如愿显示主要体现，你增长数据能够，可是减小数据，发现视图上仍是保持着最多数据的展现效果，很纳闷，明明能够经过移步修改数据，为什么增长能够绘制地图而减小好像就什么都没有作

解决方法以下：

PS:你们看了后以为对本身有帮助能够三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~