通过 NPM 使用 ECharts

有两种方式可以通过包管理器来使用 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 提供的按需引入接口来打包必须的组件，以获得最小的打包体积。

// 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 title, tooltip, 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 在按需引入的接口中不提供任何渲染器，因此你需要选择引入 CanvasRenderer 或 SVGRenderer 作为渲染器。这样做的好处是，如果你只需要使用 SVG 渲染模式，打包结果中将不会包含非必需的 CanvasRenderer 模块。

我们示例编辑页面的“完整代码”选项卡提供了一个非常便捷的方式来生成按需引入的代码。它会根据当前的配置项动态生成按需引入的代码，你可以直接在项目中使用。

在 TypeScript 中创建 Option 类型

对于使用 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 = {
  // ...
};

贡献者在 GitHub 上编辑此页