在 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 提供的 Tree Shaking 接口来打包所需的组件，从而获得最小的打包体积。
// 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 Shaking 接口中没有提供任何渲染器。因此，你需要选择导入
CanvasRenderer或SVGRenderer作为渲染器。这样做的好处是，如果你只需要使用 SVG 渲染模式，打包后的体积中就不会包含不需要的CanvasRenderer模块。
我们示例编辑页面的“完整代码”标签页提供了一种非常方便的方式来生成按需引入的代码。它会根据当前配置项（option）动态生成按需引入的代码，以便直接在你的项目中使用。
在 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 = {
// ...
};
