假如你的开发环境使用了npm
或者yarn
等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache EChartsTM 并通过 treeshaking 特性只打包需要的模块。
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
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 使用必须要的接口。 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 来开发 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 = { // ... };