setOption → 数据处理（刻度/布局/坐标映射）
         → 视觉编码（逐元素生成图形属性：颜色/大小/形状）
         → 光栅化（canvas 绘制指令 → 像素）
         → （交互时）命中检测 + tooltip 更新

const option = {
  series: [{
    type: "line",
    data: bigData,           // 10 万点
    sampling: "lttb",        // ⭐ 首选
    // 可选值：
    // 'lttb'     Largest-Triangle-Three-Bucket：保形状的降采样（下文详解）
    // 'average'  等距分桶取均值：平滑但丢峰谷
    // 'max'      分桶取最大：保留峰值（告警场景重要！）
    // 'min'      分桶取最小
  }],
};

把数据分成 N 个桶（N = 目标点数），每桶选一个"与前后关键点组成三角形面积最大"的点
→ 面积大 = 对曲线形状贡献大 → 尖峰必被保留

const option = {
  series: [{
    type: "scatter",
    data: hundredThousandPoints,
    large: true,             // ⭐ 开启大数据模式
    largeThreshold: 2000,    // 点数超过 2000 才自动启用（默认值）
    // large 模式下：
    // ✅ 渲染走批量路径（一次性把所有点喂给 canvas，不分元素）
    // ❌ 单点 hover tooltip 失效（无法区分点中了哪个点）
    // ✅ 仍支持 visualMap 整体映射
  }],
};

const option = {
  series: [{
    type: "scatter",
    data: hundredThousandPoints,
    progressive: 5000,             // 每帧渲染 5000 个元素
    progressiveThreshold: 3000,    // 元素超过 3000 才启用渐进
    progressiveChunkMode: "modulo",// 分块策略（ECharts 5.3+）
  }],
};

/**
 * 增量追加新数据点（不重发全量）
 * 注意：appendData 只能追加，不能删除——配合"定长窗口"需要定期全量重置
 */
chart.appendData({
  seriesIndex: 0,
  data: [[Date.now(), 84.2]],   // 追加的点
});

/**
 * 定长滚动窗口的完整策略：
 * - 高频（每秒）：appendData 增量追加
 * - 低频（每 5 分钟）：数据超过窗口上限时，setOption 全量替换裁剪后的数组
 */
const MAX_POINTS = 3600;   // 1 小时 @ 1s/点

setInterval(() => {
  const point = [Date.now(), readSensor()];
  if (buffer.length < MAX_POINTS) {
    chart.appendData({ seriesIndex: 0, data: [point] });
    buffer.push(point);
  } else {
    // 窗口满了：裁剪掉最旧的一小时段，全量替换
    buffer.shift();
    buffer.push(point);
    chart.setOption({ series: [{ data: [...buffer] }] });
  }
}, 1000);

// 1. 组件卸载必须 dispose（单页应用内存泄漏头号来源）
function onUnmount(chart: echarts.ECharts, timer: number): void {
  clearInterval(timer);
  chart.dispose();          // 释放实例、解绑事件、清 canvas
}

// 2. 隐藏的 Tab/弹窗里的图表：暂停更新（省 CPU）
function onTabHidden(chart: echarts.ECharts): void {
  chart.setOption({ animation: false });   // 可选：关动画
  // 更彻底：clearInterval 停数据流，显示时恢复
}

// 3. resize 防抖（Day 52 讲过，高频 resize 是隐性能杀手）

// 4. 关闭不需要的默认能力
const option = {
  animation: false,                  // 实时流场景：动画反而干扰
  series: [{ symbol: "none" }],      // 折线不画点标记
  tooltip: { show: true },           // large 模式下 axis 触发仍可用
  hoverLayerThreshold: 1,            // 老版本优化项，5.x 已默认合理
};

/**
 * 生成 10 万个模拟传感器点：正弦 + 噪声 + 随机尖峰
 */
function genSensorData(n: number): [number, number][] {
  const data: [number, number][] = [];
  const t0 = Date.now() - n * 1000;
  for (let i = 0; i < n; i++) {
    const t = t0 + i * 1000;
    const base = 80 + 10 * Math.sin(i / 3600);
    const noise = (Math.random() - 0.5) * 4;
    const spike = Math.random() < 0.0002 ? 25 : 0;   // 万分之二概率的尖峰
    data.push([t, Number((base + noise + spike).toFixed(2))]);
  }
  return data;
}

/**
 * 大数据量折线的生产级配置模板
 */
const bigLineOption = {
  animation: false,
  tooltip: { trigger: "axis" },      // large 下 item 触发失效，axis 仍可用
  series: [{
    type: "line",
    data: genSensorData(100000),
    sampling: "lttb",
    large: true,
    symbol: "none",
    progressive: 5000,
    progressiveThreshold: 3000,
    lineStyle: { width: 1 },         // 线宽 2→1：10 万段的绘制量减半
  }],
};