使用 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-shake 的介面來捆綁所需的元件並獲得最小的捆綁包。

// 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 在可 tree-shake 的介面中未提供任何渲染器，因此您需要選擇匯入 CanvasRenderer 或 SVGRenderer 作為渲染器。這樣做的好處是，如果您只需要使用 SVG 渲染模式，則捆綁包將不包含不需要的 CanvasRenderer 模組。

我們範例編輯器頁面上的「完整程式碼」索引標籤提供了一種非常方便的方式來產生可 tree-shake 的程式碼。它將根據目前的選項動態產生可 tree-shake 的程式碼，以直接在您的專案中使用。

在 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 = {
  // ...
};