在vue中实现echarts图懒加载,与响应式调整大小
最近写了一个可以拖拽的数据可视化工具,其中用到了大量的echarts图渲染,每次加载的图一多就会卡,就考虑使用懒加载,监听echarts图是否在可看见的页面中,如果在才加载。
使用 IntersectionObserver这个 API 能够监测 dom元素是否进入或离开浏览器的视口。只有图表的dom元素进入视口(即用户滚动到图表位置时),图表才被初始化和渲染。
再就是拖拽或者调整页面之后,echarts图所在dom的大小可能改变,需要echarts图能够调整大小。
使用 ResizeObserver 监测dom容器大小的变化,确保图表能够在容器大小调整时调整自身大小。
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| import * as echarts from 'echarts'; import { nextTick } from 'vue';
function initChart(dom, option, theme) { let myChart;
const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { myChart = echarts.init(dom, theme.name); nextTick(() => { myChart.setOption(option); }); observer.unobserve(dom); } else if (!entry.isIntersecting) { if (myChart) { console.log("销毁", myChart); myChart.dispose(); } } }); }, { threshold: 0.1 });
observer.observe(dom);
const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { if (entry.target.id === dom.id) { if (myChart) { myChart.resize(); } } } }); resizeObserver.observe(dom); }
export default initChart
|