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]  }]});

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

總結

以上所述是小編給大家介紹的在 webpack 中使用 ECharts的實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！