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 安装的一些库，它的用法与以上描述的方法相同。