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重绘，否则不会如愿显示主要体现，你增加数据可以，但是减少数据，发现视图上还是保持着最多数据的展示效果，很纳闷，明明可以通过移步修改数据，为何增加可以绘制地图而减少好像就什么都没有做

解决方法如下：