给 echart 加上窗口化技术
做项目的时候,渲染柱形图,后端返回大约 5000 数据,
每一个柱子高度 30 px
那么 echart 的高度:5000 * 30 = 150000 px;
echart 有两种渲染模式,分别是svg 与 canvas
canvas 渲染性能要高于svg,但是 canvas 在不同的浏览器都有限制,对最大渲染的像素不能超过一个数。
svg 渲染虽然没有这个限制,但是渲染的速度很难接受
如果数据量再大一点,svg等待时间可能是几小时
把 echart 设置一个固定的高度与宽度,比如 width 600 * height 400
每次只渲染 10 条数据,监听滚轮事件,根据滚动距离,实时截取应该被渲染的数据
- 毫秒级别渲染 10W 条数据以内,如果涉及百万条数据,需要做数据分块
- 鼠标滚轮与虚拟滚动条双向绑定
- 兼容 chrome 与 Firefox
用的是原生 js ,看看原理,可以很方便移植到 react 或者 vue 项目。
wechat: qianchaochushui