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 邀请）入群，在线解答探讨数据可视化、优化图表性能等方面的技术问题~