交互图表加载慢的核心在于数据、渲染方式和交互逻辑三层；需压缩数据体积、切换WebGL等高效渲染引擎、关闭冗余交互功能，并拆分复杂图表结构以提升性能。
交互图表加载慢，核心问题通常不在“图”本身，而在数据、渲染方式和交互逻辑这三层。只要针对性地压缩数据体积、切换高效渲染引擎、关闭冗余交互，90%的卡顿都能明显缓解。
精简数据：先砍掉一半再考虑展示
图表卡，八成是因为传了太多点过去。10万行原始销售数据直接喂给前端，浏览器根本扛不住。
- 后端聚合：按小时/天聚合销量均值，把10万点压到2000点以内
- 前端降采样：用LTTB（Largest Triangle Three Buckets）算法保留趋势关键点，不丢形态只减数量
- 视口加载：只渲染当前可视区域的数据，滚动或缩放时再异步补全——ApexCharts、ECharts 都支持
clip: true+ 分片配置
换渲染引擎：SVG 不够快就上 WebGL
默认 SVG 渲染适合几百个点；超5000点必须切 WebGL，尤其散点图、热力图这类密集型图表。
- Plotly：把
go.Scatter换成go.Scattergl，加一行代码就能提速3–5倍 - ECharts：开启
renderMode: 'canvas'或使用echarts-gl扩展处理三维/大规模散点 - Highcharts：务必启用
boost: true，配合turboThreshold: 0强制走加速通道
关掉“看起来很酷”的功能
悬停提示、拖拽缩放、图例逐条飞入……这些交互每开一个，都多一次重绘计算。用户不需要时，就该彻底禁用。
- 统一关闭：设置
hovermode: false、dragmode: 'zoom'（只留缩放，不要平移） - 简化 tooltip：只显示 x/y 值，去掉富文本、图片、自定义 HTML
- 删动画：图表初始化不用“淡入”，更新数据不用“生长动画”，用
redraw: false+setOption(..., {silent: true})静默刷新
拆结构：一张大图不如三张小图
一个含8个 series 的折线图，比8个独立单 series 图表更耗资源。浏览器要为每个 trace 单独计算坐标、路径、图例映射。
- 合并同类项：同色系多指标改用单 trace +
marker.color映射字段 - 分屏展示：把“总览+明细+对比”拆成三个独立图表，按需加载或懒加载
- 用触发器代替自动加载：PPT里用按钮触发图表模块，网页中用 Tab 切换才初始化对应图表
