建站
咨詢
售后
建站咨詢
新聞中心
Webpack 是目前比較流行的模塊打包工具，它可以分析你的項(xiàng)目結(jié)構(gòu)，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出永新免費(fèi)做網(wǎng)站回饋大家。
如果你已經(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 入門示例' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
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 入門示例' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});在 Echarts附錄一 中包含了更多可以按需引入的模塊列表。
延伸閱讀
Browserify 是另一個(gè)現(xiàn)今流行的模塊打包工具，它可以讓你使用類似于 node 的 require() 的方式來(lái)組織瀏覽器端的 Javascript 代碼，通過(guò)預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫(kù)，它的用法與以上描述的方法相同。
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)ECharts教程：ECharts怎么在webpack中使用
本文地址：http://m.5511xx.com/article/coidops.html
