乐趣区

关于echarts: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 重绘,否则不会如愿显示次要体现,你减少数据能够,然而缩小数据,发现视图上还是放弃着最多数据的展现成果,很纳闷,明明能够通过移步批改数据,为何减少能够绘制地图而缩小如同就什么都没有做

解决办法如下:

PS: 大家看了后感觉对本人有帮忙能够三连留言, 欢送提出宝贵意见,也欢送各位对相干技术有趣味的开发者(由团队开发人员微信号 x118422 邀请)入群,在线解答探讨数据可视化、优化图表性能等方面的技术问题~

退出移动版