透過 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 上編輯此頁