Echarts 数据量大,导致浏览器卡顿怎么办?
- 按需引入 ECharts 图表和组件
- 使用 SVG 渲染图形
- dataZoom 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 可以设置 dataZoom 的 start 和 end,只显示部分图表,可以优化展示性能
- 折线图 line
折线图在数据量远大于像素点时候的降采样策略,开启后可以有效的优化图表的绘制效率,默认关闭,也就是全部绘制不过滤数据点。
可选:
- 'average' 取过滤点的平均值
- 'max' 取过滤点的最大值
- 'min' 取过滤点的最小值
- 'sum' 取过滤点的和
可以很好的优化渲染
- 在 mounted()方法和 destroy()方法之间加一个 beforeDestroy()方法释放该页面的 chart 资源
beforeDestroy () { this.chart.clear() }
参考答案: - https://www.jianshu.com/p/05727f11c4ee
- https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
- https://www.geek-share.com/detail/2726512794.html
- https://blog.csdn.net/q759859479/article/details/106825398https://www.cxyzjd.com/article/WuLex/78828321