快捷導(dǎo)航

在 webpack 中使用 ECharts的實(shí)例詳解

更新時(shí)間：2018年02月05日 10:43:28 投稿：mrr

這篇文章主要介紹了在 webpack 中使用 ECharts的實(shí)例代碼,需要的朋友可以參考下

Webpack 是目前比較流行的模塊打包工具，你可以在使用 webpack 的項(xiàng)目中輕松的引入和打包 ECharts，這里假設(shè)你已經(jīng)對(duì) webpack 具有一定的了解并且在自己的項(xiàng)目中使用。

npm 安裝 ECharts

在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護(hù)的，從 3.1.1 開(kāi)始由官方 EFE 維護(hù) npm 上 ECharts 和 zrender 的 package。

你可以使用如下命令通過(guò) npm 安裝 ECharts

npm install echarts --save

引入 ECharts

通過(guò) npm 上安裝的 ECharts 和 zrender 會(huì)放在node_modules目錄下?？梢灾苯釉陧?xiàng)目代碼中 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 圖表和組件

默認(rèn)使用 require('echarts') 得到的是已經(jīng)加載了所有圖表和組件的 ECharts 包，因此體積會(huì)比較大，如果在項(xiàng)目中對(duì)體積要求比較苛刻，也可以只按需引入需要的模塊。

例如上面示例代碼中只用到了柱狀圖，提示框和標(biāo)題組件，因此在引入的時(shí)候也只需要引入這些模塊，可以有效的將打包后的體積從 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]
  }]
});

可以按需引入的模塊列表見(jiàn) https://github.com/ecomfe/echarts/blob/master/index.js

總結(jié)

以上所述是小編給大家介紹的在 webpack 中使用 ECharts的實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！