Echarts常见问题

折线图多次渲染折线条数变多

chart.setOption(option, notMerge, lazyUpdate);

• option

  图表的配置项和数据，具体见配置项手册。

• notMerge

  可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。

• lazyUpdate

  可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。

• silent

  可选，阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。

实时渲染/窗口缩放导致浏览器卡顿

• 全量+增量取数据
• http => websocket
• 关闭渲染动画（1、animation: false; 2、chart.getZr().animation.stop()）
• zlevel：zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
• 窗口缩放防抖处理

页面切换频繁后卡顿

在生命周期函数内销毁Echarts实，释放内存

• chart.dispose()
• chart.clear()

Vue中实例不要放到data中，避免不必要的挂载和数据处理

大数据量

scatter：appendData分片加载数据

line: sampling降级采样

开启大数据量优化（large、largeThreshold）