将 ECharts 用作 NPM 包

将 ECharts 用作包有两种方法。最简单的方法是从 echarts 导入，以立即使用所有功能。但是，建议仅根据需要导入，例如 echarts/core 和 echarts/charts，以大幅减小包大小。

通过 NPM 安装 ECharts

可以使用以下命令通过 npm 安装 ECharts

npm install echarts

导入所有 ECharts 功能

要包含所有 ECharts，我们只需导入 echarts。

import * as echarts from 'echarts';

// Create the echarts instance
var myChart = echarts.init(document.getElementById('main'));

// Draw the chart
myChart.setOption({
  title: {
    text: 'ECharts Getting Started Example'
  },
  tooltip: {},
  xAxis: {
    data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']
  },
  yAxis: {},
  series: [
    {
      name: 'sales',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

缩小包大小

以上代码将导入 ECharts 中的所有图表和组件，但是如果你不想引入所有组件，则可以使用 ECharts 提供的 tree-shakeable 接口来捆绑所需的组件并获得最小的包。

// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';

// Import bar charts, all suffixed with Chart
import { BarChart } from 'echarts/charts';

// Import the tooltip, title, rectangular coordinate system, dataset and transform components
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

// Features like Universal Transition and Label Layout
import { LabelLayout, UniversalTransition } from 'echarts/features';

// Import the Canvas renderer
// Note that including the CanvasRenderer or SVGRenderer is a required step
import { CanvasRenderer } from 'echarts/renderers';

// Register the required components
echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// The chart is initialized and configured in the same manner as before
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

请注意，为了将包的大小保持在最小值，ECharts 在 tree-shakeable 接口中不提供任何渲染器，因此你需要选择导入 CanvasRenderer 或 SVGRenderer 作为渲染器。这样做的好处是，如果你只需要使用 SVG 渲染模式，则包将不包含不需要的 CanvasRenderer 模块。

我们的示例编辑器页面上的“完整代码”选项卡提供了一种非常方便的方法来生成 tree-shakable 代码。它将根据当前选项动态生成 tree-shakable 代码，以便直接在你的项目中使用它。

在 TypeScript 中创建选项类型

对于使用 TypeScript 开发 ECharts 的开发人员，提供了类型接口来创建最小的 EChartsOption 类型。此类型将比提供的默认类型更严格，因为它将确切地知道正在使用哪些组件。这可以帮助你更有效地检查缺少的组件或图表。

import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // Dataset
  DatasetComponent,
  // Built-in transform (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {
  // The series option types are defined with the SeriesOption suffix
  BarSeriesOption, 
  LineSeriesOption,
} from 'echarts/charts';
import type {
  // The component option types are defined with the ComponentOption suffix
  TitleComponentOption, 
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption
} from 'echarts/components';
import type { 
  ComposeOption, 
} from 'echarts/core';

// Create an Option type with only the required components and charts via ComposeOption
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

const option: ECOption = {
  // ...
};