在webpack中使用ECharts詳解

這次帶給大家在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中文網其他相關文章！