滚动加载通过动态加载数据优化图表性能，具体包括：一、监听容器滚动事件触发加载；二、用intersection observer检测锚点进入视口；三、在echarts中动态更新series.data；四、超大数据量时采用虚拟滚动仅渲染可视区域。
当交互图表展示大量数据时，一次性加载全部数据可能导致页面卡顿或内存占用过高。滚动加载是一种优化策略，通过用户滚动到可视区域底部时动态请求并渲染新数据。以下是实现交互图表滚动加载的具体操作方法：
一、监听容器滚动事件并触发数据加载
该方法通过监测图表容器的滚动位置，在接近底部时发起下一批数据请求，并追加至现有图表数据中。需确保容器具有固定高度和 overflow-y: auto 样式，以便产生可滚动行为。
1、为图表外层容器设置唯一 ID，例如 chart-container，并在 CSS 中设定 height: 500px; overflow-y: auto;。
2、使用 JavaScript 获取该容器元素：const container = document.getElementById('chart-container');。
3、绑定 scroll 事件监听器，计算当前滚动位置是否接近底部：container.addEventListener('scroll', () => { if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) { loadMoreData(); } });。
4、定义 loadMoreData() 函数，调用接口获取增量数据并更新图表实例。
二、利用 Intersection Observer API 检测加载锚点
相比手动监听 scroll 事件，Intersection Observer 更高效且性能更优，适用于现代浏览器。它通过观察一个“加载占位符”元素是否进入视口来决定是否加载新数据，避免频繁触发回调。
1、在图表容器末尾插入一个空 DOM 元素作为加载锚点：。
2、创建 IntersectionObserver 实例，配置 root 为图表容器，threshold 设为 0：const observer = new IntersectionObserver(callback, { root: container, threshold: 0 });。
3、调用 observer.observe(document.getElementById('load-trigger')); 开始监听。
4、在回调函数中检查 entries[0].isIntersecting 为 true 时执行数据加载，并在加载完成后重新观察同一锚点或替换为新锚点。
三、在 ECharts 中集成滚动加载逻辑
ECharts 本身不内置滚动加载机制，但可通过动态更新 option 的 series.data 实现。关键在于保持原有图表配置不变，仅追加新数据点，并调用 setOption 方法刷新视图。
1、初始化图表时保存 echarts 实例引用：const myChart = echarts.init(document.getElementById('main'));。
2、维护一个全局变量记录已加载的数据长度，例如 let loadedCount = 0;。
3、每次加载成功后，将新数据 push 到原始数据数组，并调用：myChart.setOption({ series: [{ data: mergedData }] }, { notMerge: false, lazyUpdate: true });。
4、为防止重复加载，可在触发加载前设置标志位 isLoading = true，加载完成后再置为 false。
四、使用虚拟滚动替代真实滚动加载
对于超大数据量（如数万级时间序列点），即使分批加载仍可能影响渲染性能。虚拟滚动不实际渲染所有数据点，而是仅绘制当前可视区域内的数据片段，极大降低 DOM 和 Canvas 压力。
1、引入支持虚拟滚动的图表库扩展，例如 echarts-liquidfill 或自定义 series 渲染器。
2、将原始数据按视口范围切片，计算起始索引与显示数量：const startIndex = Math.floor(scrollTop / itemHeight); const displayCount = Math.ceil(containerHeight / itemHeight) + 10;。
3、从原始数据中截取子集：const visibleData = rawData.slice(startIndex, startIndex + displayCount);。
4、每次滚动后重新计算并调用 myChart.setOption({ series: [{ data: visibleData }] }); 更新图表。
