這次帶給大家在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中文網其它相關文章!
推薦閱讀:
以上是在webpack中使用ECharts詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!