ECharts怎么在webpack中使用

Webpack 是目前比較流行的模塊打包工具，它可以分析你的項(xiàng)目結(jié)構(gòu)，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。

如果你已經(jīng)對(duì) webpack 有了一定的了解，并且能夠很好的在項(xiàng)目中使用 webpack ，那么就可以學(xué)習(xí)怎么在使用 webpack 的項(xiàng)目中輕松的引入和打包 Echarts了。

通過(guò) npm 安裝 ECharts

Echarts 3.1.1 之后的版本和 zrender 的 package 在 npm 上是由官方 EFE 維護(hù)的，之前的版本不受官方維護(hù)。

使用下述命令可以通過(guò) npm 安裝 ECharts 和 zrender：

npm install echarts --save

如何引入 ECharts

Echarts 和 zrender 以 npm 的方式安裝之后會(huì)被存放在 node_modules 目錄下，直接在項(xiàng)目中運(yùn)行代碼 require('echarts') 得到 Echarts，具體操作如下：

var echarts = require('echarts');

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
    title: { text: 'ECharts 入門(mén)示例' },
    tooltip: {},
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷(xiāo)量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

ECharts 圖表和組件如何按需引入 

使用 require('echarts') 得到的 Echarts 包是包含了所有的圖表和組件的，所以容量會(huì)比較大，對(duì)于一些要求體積小的項(xiàng)目可能是不友好的，那么我們可以利用下述的代碼來(lái)根據(jù)需要引入相應(yīng)模塊。 

利用下述的代碼來(lái)引入需要使用的柱狀圖，提示框和標(biāo)題組件，這樣可以有效的縮小打包后的體積，從 400 多 KB 減小到 170 多 KB。

// 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標(biāo)題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
    title: { text: 'ECharts 入門(mén)示例' },
    tooltip: {},
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷(xiāo)量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

在 Echarts附錄一 中包含了更多可以按需引入的模塊列表。

延伸閱讀

Browserify 是另一個(gè)現(xiàn)今流行的模塊打包工具，它可以讓你使用類(lèi)似于 node 的 require() 的方式來(lái)組織瀏覽器端的 Javascript 代碼，通過(guò)預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫(kù)，它的用法與以上描述的方法相同。