ECharts怎么在webpack中使用

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

如果你已經(jīng)對 webpack 有了一定的了解，并且能夠很好的在項目中使用 webpack ，那么就可以學(xué)習(xí)怎么在使用 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');

// 基于準(zhǔn)備好的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 包是包含了所有的圖表和組件的，所以容量會比較大，對于一些要求體積小的項目可能是不友好的，那么我們可以利用下述的代碼來根據(jù)需要引入相應(yīng)模塊。 

利用下述的代碼來引入需要使用的柱狀圖，提示框和標(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實例
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 是另一個現(xiàn)今流行的模塊打包工具，它可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，通過預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫，它的用法與以上描述的方法相同。