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