在打包环境中使用 ECharts

更多关于Apache ECharts的文档，请阅读:

• Apache ECharts文档专题

---

《Apache ECharts教程》

• 5 分钟上手 ECharts
• ECharts 5 新特性
• ECharts 5 升级指南
• 在打包环境中使用 ECharts
• ECharts 基础概念概览
• 个性化图表的样式
• ECharts 中的样式简介
• 异步数据加载和更新
• 使用 dataset 管理数据
• 使用 transform 进行数据转换第一部分
• 使用 transform 进行数据转换第二部分
• 在图表中加入交互组件
• 移动端自适应
• 数据的视觉映射
• ECharts 中的事件和行为
• 动态排序柱状图
• 小例子：自己实现拖拽
• 小例子：实现日历图
• 旭日图
• 自定义系列
• 富文本标签
• 服务端渲染
• 使用 Canvas 或者 SVG 渲染
• 地理坐标系和地图系列的 SVG 底图
• 在图表中支持无障碍访问
• 使用 ECharts GL 实现基础的三维可视化
• 在微信小程序中使用 ECharts

---

假如你的开发环境使用了npm或者yarn等包管理工具，并且使用 Webpack 等打包工具进行构建，本文将会介绍如何引入 Apache EChartsTM 并通过 treeshaking 只打包需要的模块。

NPM 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

引入 ECharts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

按需引入 ECharts 图表和组件

上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    ...
});

需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入CanvasRenderer或者SVGRenderer作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的CanvasRenderer模块。

我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。

在 TypeScript 中按需引入

对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的EChartsOption类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。

import * as echarts from 'echarts/core';
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    LineSeriesOption
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    GridComponent,
    GridComponentOption
} from 'echarts/components';
import {
    CanvasRenderer
} from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption
>;

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

var option: ECOption = {
    ...
}