首頁  >  文章  >  web前端  >  在webpack中使用ECharts詳解

在webpack中使用ECharts詳解

php中世界最好的语言
php中世界最好的语言原創
2018-03-23 15:29:101930瀏覽

這次帶給大家在webpack中使用ECharts詳解,在webpack中使用ECharts的注意事項有哪些,以下就是實戰案例,一起來看一下。

Webpack 是目前比較流行的模組打包工具,你可以在使用 webpack 的專案中輕鬆的引入和打包 ECharts,這裡假設你已經對 webpack 具有一定的了解並且在自己的專案中使用。

npm 安裝 ECharts

在3.1.1 版本之前ECharts 在npm 上的package 是非官方維護的,從3.1.1 開始由官方EFE 維護npm 上ECharts 和zrender 的package。

你可以使用以下指令透過npm 安裝ECharts

npm install echarts --save

#引入ECharts

透過npm 上安裝的ECharts 和zrender會放在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 包,因此體積會比較大,如果在專案中對體積要求比較苛刻,也可以只按需引入需要的模組。

例如上面範例程式碼中只用到了長條圖,提示框和標題組件,因此在引入的時候也只需要引入這些模組,可以有效的將打包後的體積從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]
  }]
});

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

服務端直接取得檔案上傳進度

JS如何做出公用子序列

NavigatorIOS元件的使用詳解

以上是在webpack中使用ECharts詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn