1. 数据动态更新问题
-
问题 ： 当我们需要动态频繁的根据数据去变动图表的时候会出现以下问题
- 数据发生变化，可图表却没有重新渲染
- 数据错乱问题
- 大量数据导致图表样式错乱bug
步骤一
首先模拟大量数据进入 渲染图表。此处我们使用websocket进行模拟（正在做大数据可视化的小伙伴可以用到）
步骤二
新建图表子组件 配置echarts 图表
步骤三
通过 onmessage方法监听到接受的数据后 传递给图表子组件。子组件通过 watch 监听的方式 监听数据流
图表如下
根据如上基础配置可以看出 每当新的一条数据进来时 都会重复调用 this.lineonedata(); 这个方法 使得图表一直处于刷新状态
当数据流进入过大的时候 依然会导致卡顿问题
- 解决方法：根据如上问题 有两种普遍解决方法如下
-
- 使用 echarts.dispose() 方法 将之前的实例删除掉 然后使用 echarts.init() 方法重新创造一个新的实例。
echarts.dispose()
描述：
释放图表实例，释放后实例不再可用。
-
- 执行 echarts.clear() 方法 清空当前实例，会移除当前实例的组件和图表。再重新使用 setOptions()
我们来看看 官方的描述
可以看到二者之间的区别 echarts.dispose() 方法会将整个 echarts实例进行销毁。需要重新使用 echarts.init() 方法才会重新刷新数据
执行 echarts.clear() 方法 只会清空当前实例的内容，并不会进行销毁 。我们只需要 重新使用setOption() 就可以 看到最新的数据。
以上两种解决方法 是可以看见图表重新进行渲染 达到想要的目的 。
但是当数据量特别巨大，如websocket每秒进入上百条数据时。echarts图表仍然会有略微科顿
- 解决方法1 ：当数据量大 首先将 animation 设置为 false，因为 大部分类型图表都会提供一个开关动画的参数，把它关掉图表会有一个快速闪烁的动作。
- 解决方法2 : 将setOptions() 第二个参数设置为 true
当修改setOption值的时候，我们异步回来的数据层级比较深的情况下，需要echarts重绘，否则不会如愿显示主要体现，你增加数据可以，但是减少数据，发现视图上还是保持着最多数据的展示效果，很纳闷，明明可以通过移步修改数据，为何增加可以绘制地图而减少好像就什么都没有做
解决方法如下：
PS:大家看了后觉得对自己有帮助可以三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~
