Webstorm+Webpack+echarts
ECharts 特性介紹
ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。
ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，並且對移動端做了深度的優化。
1、npm 安裝 ECharts
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護的，從 3.1.1 開始由官方 EFE 維護 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通過 npm 安裝 ECharts
npm install echarts --save
完成，如下圖所示：
文件結構，在node_modules文件下，多了echarts和zrender兩個文件夾。
2、在index.js文件中引入 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] }] });
index.js全部文件
/** * Created by on 2017/1/5. */ var $=require('jquery'); 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] }] });
注意：在index.html中添加一個准備好的dom，初始化echarts。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <h1>Hello world</h1> <button>提交</button> <script src="./bundle.js"></script> </body> </html>
2.1運行看結果
3、在index.js文件中引入 ECharts（南丁格爾圖圖）
/** * Created by on 2017/1/5. */ var $=require('jquery'); var echarts = require('echarts'); // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); var myChart_01 = echarts.init(document.getElementById('main_01')); // 繪制柱狀圖 myChart.setOption({ title: { text: 'ECharts 柱狀圖' }, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); //餅圖（南丁格爾圖） myChart_01.setOption({ title: { text: 'ECharts 南丁格爾圖' }, //設置背景顏色 // backgroundColor: '#2c343c', visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:400, name:'搜索引擎'}, {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:274, name:'聯盟廣告'}, {value:235, name:'視頻廣告'} ], roseType: 'angle',//南丁格爾圖 itemStyle: { normal: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) document.addEventListener('DOMContentLoaded',function(){ console.log('hi'); $('button').click(function(){alert('I LOVE YOU1')}); });
注意：在index.html里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom（柱狀圖） --> <div id="main" style="width: 600px;height:400px;"></div> <!--南丁格爾圖--> <div id="main_01" style="width: 600px;height:400px; "></div> <h1>Hello world</h1> <button>提交</button> <script src="./bundle.js"></script> </body> </html>
3.1運行看結果
Ps：可以參考官方文檔：http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D