ECharts 数据可视化：配置体系、交互与按需加载

import * as echarts from 'echarts';

const chart = echarts.init(container);

// 第一次 setOption：建立完整状态
chart.setOption({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['1月', '2月', '3月'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', name: '销量', data: [120, 200, 150] }],
});

// 合并更新：只改数据，轴和系列其他配置不动
chart.setOption({ series: [{ data: [150, 80, 210] }] });

// 系列数量会变化时，必须显式声明替换，否则旧系列残留
chart.setOption(
  { series: [{ type: 'bar', name: '新系列', data: [1, 2, 3] }] },
  { replaceMerge: ['series'] }      // 按维度整体替换，而不是按 index 合并
);

// dataset + encode：数据只写一遍，系列声明"从哪个维度取值"
chart.setOption({
  dataset: {
    dimensions: ['月份', '成交量', '均线'],
    source: [
      ['1月', 86, 80],
      ['2月', 92, 84],
      ['3月', 78, 86],
    ],
  },
  series: [
    { type: 'bar', name: '成交量', encode: { x: '月份', y: '成交量' } },
    { type: 'line', name: '均线', encode: { x: '月份', y: '均线' }, smooth: true },
  ],
});

chart.setOption({
  grid: [{ left: 48, right: 24, top: 40, bottom: 32 }],
  xAxis: { type: 'category' },          // dataset 模式下类目自动取自 encode 的 x 维度
  yAxis: [
    { type: 'value', name: '成交量', position: 'left' },
    { type: 'value', name: '均线', position: 'right', splitLine: { show: false } },
  ],
  series: [
    { type: 'bar', name: '成交量', encode: { x: '月份', y: '成交量' } },
    { type: 'line', name: '均线', yAxisIndex: 1, smooth: true, encode: { x: '月份', y: '均线' } },
  ],
});

chart.setOption({
  tooltip: {
    trigger: 'axis',                    // 折线/柱状用 axis，散点/饼用 item
    axisPointer: { type: 'cross' },
    valueFormatter: (value: number) => `${value.toFixed(1)}%`,
    position: (point, _params, _dom, rect) => {
      // 跟随鼠标并防出界：优先显示在右侧，右边缘时翻到左侧
      return [Math.min(point[0] + 16, rect.width - 180), point[1] - 12];
    },
  },
});

// 点击数据项
chart.on('click', (params) => {
  if (params.componentType !== 'series') return;
  openDetail(params.name, params.value);      // 参数里带系列名、维度名与值
});

// legend 切换后重算合计
chart.on('legendselectchanged', (params) => {
  const visible = Object.keys(params.selected).filter((k) => params.selected[k]);
  updateSummary(visible);
});

// 多图联动：同 group 的图表共享 dataZoom 与 tooltip
chart.setOption({ dataZoom: [{ type: 'inside' }] });
detailChart.setOption({ dataZoom: [{ type: 'inside' }] });
echarts.connect([chart, detailChart]);

// echarts/core 是不含任何图型的运行时核心
import * as echarts from 'echarts/core';
import { LineChart, BarChart, HeatmapChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DatasetComponent,
  DataZoomComponent,
  VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  LineChart, BarChart, HeatmapChart,
  GridComponent, TooltipComponent, LegendComponent,
  DatasetComponent, DataZoomComponent, VisualMapComponent,
  CanvasRenderer,
]);

const chart = echarts.init(container);

const observer = new ResizeObserver(() => chart.resize());
observer.observe(container);

// 组件卸载：resize 监听、图表实例一起清理
function dispose(): void {
  observer.disconnect();
  chart.dispose();                 // dispose 后容器内容与事件全部清掉
}

echarts.registerTheme('brand', {
  color: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
  textStyle: { fontFamily: 'system-ui, sans-serif', fontSize: 12 },
  categoryAxis: { axisLine: { lineStyle: { color: '#cbd5e1' } } },
});

const chart = echarts.init(container, 'brand');   // init 时指定主题
// 深色模式：registerTheme 注册一套 dark 主题，跟随系统切换时
// dispose 后按新主题重新 init（换主题不重建会残留旧色）

chart.setOption({
  series: [
    {
      type: 'line',
      sampling: 'lttb',                // 降采样后线条仍保留峰值形态
      data: bigSeries,                 // 原始 10 万点
      animation: false,                 // 大数据动画是纯开销
      tooltip: { trigger: 'axis' },
    },
  ],
});

const buffer: number[] = [];
let flushTimer = 0;

// 推送端：SSE / WebSocket 持续到达，只进缓冲，不直接碰图表
function onTick(point: number): void {
  buffer.push(point);
  if (buffer.length >= 120) buffer.shift();     // 固定窗口，防止无限增长
}

// 渲染端：固定节奏整批刷新，例如 2 秒一次
function startFlushing(): void {
  flushTimer = window.setInterval(() => {
    if (document.hidden) return;                // 页面不可见时跳过，数据继续攒在窗口里
    chart.setOption({ series: [{ data: [...buffer] }] });
  }, 2000);
}