在一个页面上使用多个 ECharts 图表并处理大量数据时，性能问题确实是个不小的挑战。这主要是因为浏览器既要处理庞大的数据量，又要同时渲染和更新多个图表，很容易导致页面卡顿甚至崩溃。

解决这个问题需要一个系统性的策略，从数据处理、渲染配置、计算优化和资源管理这四个核心层面入手。下面是一个清晰的解决框架：

🧮 数据层面：从源头"减负"

这是最有效的一步，直接从数据量上下手，减轻前端的处理压力。

• 数据降采样：当数据点超过屏幕像素时，很多点是“画不出来的”。可以通过算法保留关键特征点（如峰值、趋势），同时大幅减少数据量。推荐使用 LTTB (最大三角形三桶) 算法，它能在保留数据轮廓的同时将10万条数据压缩至千条以内，渲染效率提升90%以上。ECharts 也内置了sampling: 'lttb'配置。
• 数据聚合：在后端或前端对数据进行预处理，比如将每秒的数据聚合成每分钟的平均值、总和等。例如，展示全年订单趋势时，将每日数据聚合为周或月数据，数据量可减少80%以上。
• 数据分片与懒加载：不要一次性请求所有数据。可以先加载概览数据，当用户通过dataZoom组件缩放或滚动时，再按需加载更精细的数据。ECharts 的appendData方法可以实现增量渲染。

⚙️ 配置层面：让渲染更"轻松"

通过调整ECharts的配置项，可以显著降低图表的渲染计算量。

• 开启“大型数据”模式：在series中设置large: true，ECharts会启用内部的优化算法进行批量绘制，这对于超过1-2千的数据点非常有效。同时可以设置largeThreshold来手动触发阈值。
• 关闭非必要的视觉效果：
  • 动画：设置 animation: false，这在大量数据下可节省约30%的渲染时间。
  • 数据点标记：设置 symbol: 'none'，隐藏折线上的小圆圈。
  • 平滑曲线：设置 smooth: false，因为计算贝塞尔曲线非常消耗CPU。
  • 阴影和渐变：简化itemStyle中的复杂样式。
• 启用渐进式渲染：通过progressive（渐进渲染步长）和progressiveThreshold（启用渐进渲染的阈值）配置，让图表分批次渲染数据点，避免一次性绘制大量图形造成的卡顿。
• 优化交互：将tooltip的触发方式从默认的'mousemove'改为'click'，或者使用tooltip.delay来减少高频计算。

🧠 计算层面：把"重活"放后台

JavaScript是单线程的，复杂的计算会阻塞UI更新。使用Web Worker可以将耗时任务移到后台线程。

• 使用 Web Worker 处理数据：将获取数据、解析数据、执行LTTB降采样算法等CPU密集型任务放在Worker线程中执行。这样，即使后台在处理5万以上的数据点，页面主线程依然可以流畅响应用户的滚动和点击。

  // 主线程代码
  const worker = new Worker('/path/to/lttb-worker.js');
  worker.postMessage({ data: rawData, threshold: 2000 });
  worker.onmessage = (event) => {
    const sampledData = event.data;
    myChart.setOption({ series: [{ data: sampledData }] });
  };
  

• 事件节流与防抖：对window.resize、mousemove等高频率事件进行节流（throttle）或防抖（debounce）处理，避免频繁调用chart.resize()或触发重绘。

🧹 工程与资源层面：做好"大管家"

良好的编码习惯和资源管理是页面长期稳定运行的保障。

• 按需引入ECharts模块：不要全量引入ECharts。只引入项目实际用到的图表类型和组件（如LineChart, BarChart, Grid等），可以有效减少打包后的体积，加快页面加载速度。
• 及时销毁图表实例：在组件卸载或页面隐藏时，务必调用chart.dispose()方法来释放图表占用的内存和监听器，防止内存泄漏。
• 使用高效的数据格式：对于纯数值型数据，考虑使用Typed Array（类型数组，如Float32Array）来代替普通的JavaScript数组。它的解析速度更快，内存占用更低，ECharts可以直接消费这类数据。
• 选择正确的渲染器：对于大多数大数据量场景（万级以上），Canvas渲染器是首选，因为它基于像素绘制，无需维护庞大的DOM树。实测数据显示，10万数据点下Canvas渲染时间（约900ms）远优于SVG（约1800ms）。

在 Vue 中监测一个 div 的宽度变化，可以使用以下几种方法，主要结合 ResizeObserver 或其他方式来实现动态监听。以下是具体实现方案：

方法 1：使用 ResizeObserver

ResizeObserver 是现代浏览器提供的 API，专门用于监听元素尺寸变化。它性能高效，适合动态监测 div 的宽度变化。

<template>
  <div ref="targetDiv" class="target-div">
    这是一个可调整大小的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    // 创建 ResizeObserver 实例
    const observer = new ResizeObserver((entries) => {
      for (let entry of entries) {
        // 获取 div 的宽度
        this.divWidth = entry.contentRect.width;
        console.log('Div 宽度变化:', this.divWidth);
      }
    });

    // 监听目标 div
    observer.observe(this.$refs.targetDiv);
    
    // 组件销毁时清理 observer
    this.$on('hook:beforeDestroy', () => {
      observer.disconnect();
    });
  },
};
</script>

<style>
.target-div {
  width: 200px;
  height: 100px;
  background: lightblue;
  resize: horizontal; /* 允许水平拖动调整大小 */
  overflow: auto;
}
</style>

说明：

• ResizeObserver 会在 div 尺寸变化时触发回调，获取最新的宽度。
• 使用 this.$refs.targetDiv 获取 DOM 元素。
• 在组件销毁时调用 observer.disconnect() 清理监听，避免内存泄漏。
• resize: horizontal 是 CSS 属性，方便测试宽度调整（需要配合 overflow: auto）。

方法 2：结合 Vue 的 watch 监听动态宽度

如果 div 的宽度是由响应式数据（如 style 或计算属性）控制的，可以通过 watch 监听相关数据的变化。

<template>
  <div :style="{ width: divWidth + 'px' }" class="target-div">
    宽度: {{ divWidth }}px
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 200,
    };
  },
  watch: {
    divWidth(newWidth) {
      console.log('Div 宽度变化:', newWidth);
    },
  },
};
</script>

<style>
.target-div {
  height: 100px;
  background: lightcoral;
}
</style>

说明：

• 适用于宽度由 Vue 响应式数据驱动的场景。
• 如果宽度变化是由外部（如用户拖动或 CSS）引起的，这种方法不适用。

方法 3：使用 window resize 事件（间接监测）

如果 div 的宽度变化与窗口大小相关（例如百分比宽度），可以监听 window 的 resize 事件。

<template>
  <div ref="targetDiv" class="target-div">
    这是一个宽度随窗口变化的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  methods: {
    updateWidth() {
      this.divWidth = this.$refs.targetDiv.offsetWidth;
      console.log('Div 宽度:', this.divWidth);
    },
  },
  mounted() {
    this.updateWidth(); // 初始化宽度
    window.addEventListener('resize', this.updateWidth);
    
    // 清理事件监听
    this.$on('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.updateWidth);
    });
  },
};
</script>

<style>
.target-div {
  width: 50%; /* 宽度随窗口变化 */
  height: 100px;
  background: lightgreen;
}
</style>

说明：

• 适合 div 宽度依赖窗口大小的场景（如 width: 50%）。
• 使用 offsetWidth 获取 div 的实际宽度。
• 注意清理事件监听以防止内存泄漏。

方法 4：使用第三方库（如 element-resize-detector）

如果需要兼容旧浏览器或更复杂的场景，可以使用第三方库如 element-resize-detector。

1. 安装库：

   npm install element-resize-detector
   

2. 在 Vue 组件中使用：

<template>
  <div ref="targetDiv" class="target-div">
    这是一个可调整大小的 div
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector';

export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    const erd = elementResizeDetectorMaker();
    erd.listenTo(this.$refs.targetDiv, (element) => {
      this.divWidth = element.offsetWidth;
      console.log('Div 宽度变化:', this.divWidth);
    });

    // 清理监听
    this.$on('hook:beforeDestroy', () => {
      erd.removeAllListeners(this.$refs.targetDiv);
    });
  },
};
</script>

<style>
.target-div {
  width: 200px;
  height: 100px;
  background: lightyellow;
  resize: horizontal;
  overflow: auto;
}
</style>

说明：

• element-resize-detector 提供了跨浏览器兼容的尺寸变化监听。
• 适合不支持 ResizeObserver 的旧浏览器。

推荐方案

• 首选 ResizeObserver：现代、性能高、代码简洁，适合大多数场景。
• 如果 div 宽度由响应式数据控制，使用 watch。
• 如果宽度与窗口大小相关，使用 window resize 事件。
• 如果需要兼容旧浏览器，考虑 element-resize-detector。

注意事项

1. 性能：避免在大量元素上绑定监听，可能导致性能问题。
2. 清理：总是清理 ResizeObserver、事件监听或第三方库的绑定，防止内存泄漏。
3. 浏览器兼容性：ResizeObserver 在现代浏览器（Chrome 64+、Firefox 69+ 等）支持良好，旧浏览器需 polyfill 或使用第三方库。