Angular 中的 Echarts

Source: Dev.to

ECharts 与 Angular 集成指南

嗨 👋 – 希望你今天过得棒棒的！

本文将讨论如何在 Angular 中使用 ECharts 并通过正确的导入实现有效的 tree‑shaking。你可以直接使用 ECharts 库，也可以使用 ngx-echarts 包装器。

何时直接使用 ECharts vs. 使用 ngx-echarts 包装器

直接使用 ECharts（无包装器）

优点

• 完全掌控初始化和生命周期
• 没有抽象层的额外开销
• 可直接访问所有 ECharts API

缺点

• 需要手动处理窗口尺寸变化
• 需要编写更多模板代码
• 需要自行处理内存清理

ngx-echarts 包装器

优点

• 自动处理 Angular 生命周期
• 内置 resize observer
• 减少模板代码
• 更好地融入 Angular 规范

缺点

• 增加了抽象层
• 对特定场景的控制力下降
• 依赖包装器的更新

推荐： 对需要细粒度控制的自定义仪表盘使用直接的 ECharts；对普通应用则使用 ngx-echarts。

正确的导入方式与 Tree‑Shaking

❌ 错误示例（引入全部）

import * as echarts from 'echarts';  // Bundle: ~700‑900 KB

这会无论你实际使用什么，都把整个 ECharts 库全部打包，导致体积巨大。

✅ 正确示例（可 Tree‑Shaking）

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 只注册你实际使用的部分
echarts.use([
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  CanvasRenderer
]);

包体积对比

• 之前（错误方式）： ~900 KB
• 之后（正确方式）： ~80‑100 KB

节省比例： 91 % 🚀

为什么 echarts.use() 至关重要

echarts.use() 函数只会注册你需要的组件。若不使用它：

• 包体积更大： 所有代码都会被打入 bundle
• 加载速度慢： 用户需要下载不必要的代码
• 优化受限： Tree‑shaking 无法有效工作

可以把它想象成：你只想借一本书，却去图书馆把整座图书馆都搬回家。

TypeScript 类型支持

若想在保持 tree‑shaking 的同时获得 IDE 对图表选项的自动补全：

import type { EChartsOption } from 'echarts/types';

const option: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};

重要提示： 使用 import type（而不是普通的 import），这样类型会在编译时被剔除，不会进入最终的 bundle。

祝编码愉快！ 🎉