建站
咨詢
售后
建站咨詢
新聞中心
Webpack 是目前比較流行的模塊打包工具，它可以分析你的項目結(jié)構(gòu)，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
公司主營業(yè)務(wù)：網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出永新免費做網(wǎng)站回饋大家。
如果你已經(jīng)對 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 包是包含了所有的圖表和組件的，所以容量會比較大，對于一些要求體積小的項目可能是不友好的，那么我們可以利用下述的代碼來根據(jù)需要引入相應(yīng)模塊。
利用下述的代碼來引入需要使用的柱狀圖，提示框和標題組件，這樣可以有效的縮小打包后的體積，從 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 是另一個現(xiàn)今流行的模塊打包工具，它可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，通過預編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫，它的用法與以上描述的方法相同。
分享名稱：創(chuàng)新互聯(lián)ECharts教程：ECharts怎么在webpack中使用
網(wǎng)頁鏈接：http://fisionsoft.com.cn/article/coidops.html
