下面给出一个典型配置：

const chart = echarts.init, null, {renderer:'canvas'});
chart.setOption({
    xAxis: {type:'time'},
    yAxis: {type:'value'},
    dataZoom: ,
    series:   // 初始为空，由 Worker 填充
     }]
});

需要提醒的是：开启 large 后单点样式将不再生效；所有点会共享同一套样式配置。因此Ru果业务要求对特定异常点Zuo高亮，请先通过采样前置过滤出这些关键点，再单独用 markLine 或 markPoint 标记。

LTTB 是目前 ECharts 默认采用的一种降采样手段，它把原始序列划分为若干「桶」，在每个桶里挑选Neng够形成「Zui大三角形面积」的那一点作为代表。直观来讲，就是让保留下来的点尽可Neng保留曲线拐弯的信息，而不是仅仅取等距抽样导致波峰波谷消失。

// 假设Yi经有 rawData:Array<>
function lttbDownSample:number{
   const len = rawData.length;
   if  return rawData.slice;
   const bucketSize =  / ;
   let aIdx = 0;                     // 第一个点必选
   const sampled:]=];
   for{
       const start = Math.floor*bucketSize)+1;
       const end   = Math.floor*bucketSize)+1;
       // 前一桶的代表点坐标
       const  = rawData;
       // 当前桶所有点中找出与上一点形成Zui大面积的那个
       let maxArea=-1, nextIdx=start;
       for{
           const =rawData;
           // 用下一桶平均坐标作“C”
           const cx=;
           const cy=;
           const area=Math.abs*-*);
           if{maxArea=area;nextIdx=j;}
       }
       sampled.push;
       aIdx=nextIdx;
   }
   sampled.push;      // Zui后一个点必选
   return sampled;
}

LTTB 的优点是对趋势保持相当好，但它仍然是一种“近似”。Ru果业务场景要求精确到每个原始采样值，则不宜使用该算法；而在监控类折线图里它Yi经足够满足“kan得见大体走向，kan不见细枝末节”的需求。

LTTB 把原始千百上万的数据压缩到几百甚至几十个点，这直接导致 tooltip 在鼠标悬停时只Neng显示采样后的数值。Ru果业务必须展示精确数值，请配合以下两种方案：

局部放大查询：当用户将 dataZoom 拉至极窄范围时触发一次 “细粒度” 请求，仅获取该窗口内完整数据并重新渲染；这样既保证全局快速，又Neng在放大时kan到真实数值。

双层 Tooltip：利用 series 中的 “markPoint” 手动标记关键阈值或异常点，在普通视图下显示聚合信息，在放大后再展示原始详情。

温馨提示：LTTB 会丢失细节，所以Ru果你的图表必须实时展示每秒一次的数据波动，请考虑改用 “堆叠柱状 + 滚动窗口” 或者直接使用 WebGL 加速库如 ECharts‑GL.

Ke以kan到，仅靠开启 large 就Yi经提升近三倍，而结合 LTTB 与渐进式渲染geng是让 FPS 超过了常规动画阈值。加入 Worker 后CPU 占用明显下降，页面滑动和缩放dou几乎零延迟。

① 分段请求 + 缓存：使用上述 splitDateRange, 把跨年查询拆成 ≤180 天的小块，并把Yi请求过的数据缓存在 IndexedDB/LocalStorage 中，以免重复拉取。

② 渲染引擎选 canvas：SVG 在节点数>10k 时会出现性Neng崩溃，务必确认初始化时 `renderer:'canvas'`。

③ 开启 large & largeThreshold：`large:true` 配合 `largeThreshold`，让底层绘制走批处理路径。

④ 使用 progressive 渲染：`progressive` 控制每帧绘制数量，`progressiveThreshold` 决定何时启动；一般设为 `400/20000` 即可满足十万级别需求。

⑤ 降采样策略：`sampling:"lttb"` Neng兼顾趋势保真与性Neng；Ru果是散点图且不要求连线，可直接关闭 sampling，提高精度展示。

⑥ Web Worker 并行计算：`new Worker` 把聚合、异常检测等耗时逻辑搬到后台线程；主线程只负责 UI 与交互。

⑦ 动态加载细粒度数据：a) 初次只渲染当前视口范围；b) 当 dataZoom 缩放至小于 `zoomThreshold%` 时触发二次精细请求并geng新 series；c) 使用 `replaceMerge:` 保持 zoom 状态不被重置。

⑧ Tooltip 精度补偿：`formatter` 中判断当前是否处于「细粒度模式」，若是则从缓存中读取原始值，否则展示抽样后的统计信息。

* 小技巧 *: 为防止 Chrome 隐蔽 GC 导致突发卡顿，可在空闲时调用 `chart.resize` 强制刷新画布尺寸，使内部缓冲区重新分配。.

ECharts 本身Yi经提供了不少性Neng加速手段，但想要真正Zuo到十万级别流畅呈现，还需要结合业务特点进行"拆解 → 并行 → 降采样 → 增量渲染"

拆解：a）按时间窗口把庞大的查询切块；b）只加载用户当前关注的那块数据；c）Zuo好缓存防止重复拉取。

并行：a）利用 Web Worker 把聚合/过滤搬离 UI 主线程；b）多请求Ke以通过 Promise.allSettled 实现并发下载，不会阻塞页面加载。

降采样：a）LTTB Neng保留拐点信息而显著削减节点数；b）根据图表类型灵活选择是否开启 sampling，例如柱状图建议关闭，因为柱子宽度本身就Zuo了聚合效果。

增量渲染：a）large + progressive 把一次性绘制任务拆成多帧执行，让浏览器有机会处理用户交互事件；b）dataZoom + 动态加载让用户感受不到背后数据分页的存在。