通过npm引入的echart目录_ECharts怎么在webpack中使用

Webpack 是目前比较流行的模块打包工具，它可以分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss，TypeScript等)，并将其转换和打包为合适的格式供浏览器使用。

如果你已经对 webpack 有了一定的了解，并且能够很好的在项目中使用 webpack ，那么就可以学习怎么在使用 webpack 的项目中轻松的引入和打包 Echarts了。

通过 npm 安装 ECharts

Echarts 3.1.1 之后的版本和 zrender 的 package 在 npm 上是由官方 EFE 维护的，之前的版本不受官方维护。

使用下述命令可以通过 npm 安装 ECharts 和 zrender：npm install echarts --save

如何引入 ECharts

Echarts 和 zrender 以 npm 的方式安装之后会被存放在 node_modules 目录下，直接在项目中运行代码 require('echarts') 得到 Echarts，具体操作如下：var echarts = require('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 图表和组件如何按需引入

使用 require('echarts') 得到的 Echarts 包是包含了所有的图表和组件的，所以容量会比较大，对于一些要求体积小的项目可能是不友好的，那么我们可以利用下述的代码来根据需要引入相应模块。

利用下述的代码来引入需要使用的柱状图，提示框和标题组件，这样可以有效的缩小打包后的体积，从 400 多 KB 减小到 170 多 KB。// 引入 ECharts 主模块

var echarts = require('echarts/lib/echarts');

// 引入柱状图

require('echarts/lib/chart/bar');

// 引入提示框和标题组件

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

// 基于准备好的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附录一 中包含了更多可以按需引入的模块列表。

延伸阅读

Browserify 是另一个现今流行的模块打包工具，它可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库，它的用法与以上描述的方法相同。