Vue3 + ECharts 大数据量阶梯式动态加载实践

1. 背景与挑战

在工业物联网（IIoT）场景下，历史数据查询往往涉及海量数据点。如果一次性加载跨度为一年甚至更久的所有秒级/分钟级数据，会面临以下问题：

后端压力大：数据库查询和传输耗时过长。
前端渲染卡顿：ECharts 需要处理百万级数据点，导致浏览器崩溃或交互极度卡顿。
网络传输慢：巨量 JSON 数据传输阻塞网络。

为了解决这个问题，我们在 History 页面实现了**阶梯式动态加载（Step-by-step Dynamic Loading）**机制。

2. 核心设计理念

核心思想是：“按需加载，视窗决定精度”。

分级阈值：定义不同的时间跨度阈值（如1年、1个月、1天等）。
动态监测：监听 ECharts 的 dataZoom 缩放事件。
按需请求：
- 当用户放大视图（查看更短时间范围）且跨越了某个阈值时，触发新的 API 请求，后端根据新的时间范围返回更高精度（或未降采样）的数据。
- 当用户缩小视图（查看更长时间范围）且跨越阈值时，重新请求较粗粒度的数据。
- 如果缩放未跨越阈值，则直接由 ECharts 在前端进行本地缩放，不再请求服务器。

3. 实现细节

3.1 定义时间阈值 (`TIME_THRESHOLDS`)

我们预设了一组时间跨度阈值，按从大到小排序。

const TIME_THRESHOLDS = [
  { name: "1年", ms: 365 * 24 * 60 * 60 * 1000 },
  { name: "6个月", ms: 180 * 24 * 60 * 60 * 1000 },
  { name: "3个月", ms: 90 * 24 * 60 * 60 * 1000 },
  { name: "1个月", ms: 30 * 24 * 60 * 60 * 1000 },
  { name: "1周", ms: 7 * 24 * 60 * 60 * 1000 },
  { name: "1天", ms: 1 * 24 * 60 * 60 * 1000 }
] as const;

3.2 状态管理

使用 ref 跟踪当前的缩放级别和数据边界：

currentThresholdIndex: 当前所处的精度级别 (-1 表示未初始化)。
originalBounds: 首次查询时的完整时间范围（作为限制边界）。
currentViewBounds: 当前视图的时间范围。

3.3 阈值判断 (`getThresholdIndex`)

根据当前的时间跨度（毫秒），计算出应该匹配哪一个阈值等级。

const getThresholdIndex = (spanMs: number): number => {
  for (let i = TIME_THRESHOLDS.length - 1; i >= 0; i--) {
    if (spanMs <= TIME_THRESHOLDS[i].ms) {
      return i; // 返回能覆盖当前跨度的最小区间的索引
    }
  }
  return 0; // 默认最大区间
};

3.4 核心缩放逻辑 (`handleDataZoomChange`)

这是整个机制的“大脑”。它监听图表的缩放事件，并经过防抖处理（300ms）。

逻辑流程：

计算新跨度：根据 dataZoom 事件的 startTime 和 endTime 计算新的时间跨度 zoomSpanMs。
计算新索引：调用 getThresholdIndex(zoomSpanMs) 得到 newThresholdIndex。
判断跨越：
- 如果 newThresholdIndex !== currentThresholdIndex，说明用户跨越了精度层级。
- 触发加载：计算新的请求时间范围，调用 historyCharts 重新拉取数据。
- 优化体验：如果是本地微调（未跨越阈值），则不做任何操作，让 ECharts 自身处理，保证丝滑流畅。

const handleDataZoomChange = (payload: { startTime: string; endTime: string; zoomStart: number; zoomEnd: number }) => {
  if (chartLoading.value) return; // 防止并发请求

  // 防抖处理
  if (zoomDebounceTimer) clearTimeout(zoomDebounceTimer);

  zoomDebounceTimer = setTimeout(async () => {
    const zoomStartTime = new Date(payload.startTime);
    const zoomEndTime = new Date(payload.endTime);
    const zoomSpanMs = zoomEndTime.getTime() - zoomStartTime.getTime();

    // 1. 计算新的层级
    const newThresholdIndex = getThresholdIndex(zoomSpanMs);

    // 2. 检测渐进式放大（当用户试图恢复全览时）
    const isNearFullExpand = payload.zoomStart < 5 && payload.zoomEnd > 95;
    if (isNearFullExpand && originalBounds.value && currentThresholdIndex.value > 0) {
        // 逻辑：尝试加载上一级（更粗粒度）的数据，而不是直接跳到最顶层，避免数据量突增
        // ... (详见代码)
    }

    // 3. 常规层级跨越检测
    if (newThresholdIndex !== currentThresholdIndex.value) {
      console.log("[阶梯加载] 跨越区间阈值，触发数据请求");
      
      // 根据新的层级对应的标准跨度，重新计算请求的起止时间
      // 这样做是为了让数据加载有一个标准化的“视窗”，而不是随意的用户缩放区间
      const targetSpanMs = TIME_THRESHOLDS[newThresholdIndex].ms;
      const normalizedRange = calculateExpandedRange(zoomStartTime, zoomEndTime, targetSpanMs);
      
      await historyCharts({
        startTime: normalizedRange.startTime.toISOString(),
        endTime: normalizedRange.endTime.toISOString()
      }, true);
    }
  }, 300);
};

3.5 智能区间扩展 (`calculateExpandedRange`)

当触发重新加载时，我们不会直接使用用户缩放的那一瞬间的 startTime 和 endTime。因为用户的缩放是很随意的（比如缩放到 13.5 天）。

如果直接请求 13.5 天的数据，后端无法有效利用缓存。我们使用 calculateExpandedRange：

找到当前视图的中心点 (Center)。
根据新的层级（比如“1个月”），以中心点为基准向左右扩展。
利用 clampToOriginalBounds 确保不超出最初选择的时间范围。

这样，每次请求的时间段都是规整的，且符合用户当前的关注焦点。

4. 后端配合

前端在请求时会带上 compress=true 参数。后端应配合实现动态降采样：

如果请求跨度小（如1小时），后端返回全量数据。
如果请求跨度大（如1个月），后端进行降采样（如每5分钟取一个点），保证返回的数据点数量可控（例如控制在 1000-2000 点左右）。

5. 总结

这套方案完美平衡了“宏观趋势”与“微观细节”：

全览模式：用户看到的是经过压缩的宏观数据，加载快。
深钻模式：用户放大到局部，前端自动检测并静默拉取该局部的高清数据。
用户体验：本地小范围缩放极其流畅（无网络请求），跨层级缩放自动补全数据（有 loading 提示）。

Vue3-ECharts大数据量阶梯式动态加载