1、背景
- 最近由於基本業務的上線應用，須要對網站進行一些統計監控，想到能夠拓展使用
echarts, 在此記錄一下簡單的使用方式，以做備忘，也方便後期直接拿來使用
簡要介紹：javascript
ECharts， 一個使用 JavaScript 實現的開源可視化庫; 能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）; 底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表 ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖; 用於地理數據可視化的地圖、熱力圖、線圖; 用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行座標; 還有用於 BI 的漏斗圖，儀表盤; 而且支持圖與圖之間的混搭 ......
官方詳情，就移步：—— ECHARTS （商業級數據圖表）php
2、使用步驟
- 鄙人的使用環境爲
"ThinkPHP5.1.2 + layui + echarts+ phpStudy" - 採用的方式爲：下載官網的
echarts.js文件，並進行本地引用，而後經過 異步數據加載和更新方法 進行頁面數據渲染
①. 引入 ECharts
- 注意從官網下載
echarts.js文件，好比鄙人就是在「下載」頁最後，點擊「我的定製」，選取所須要的樣式進行下載便可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="__ECHARTS__/echarts.js"></script> </head> <body> <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> </html>
②. 進行異步數據請求與頁面渲染
- 鄙人認爲，異步數據的請求加載纔是正常業務的應用場景，以下展現鄙人的源碼以便參考
<script> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的座標軸 myChart.setOption({ title: { text: '熱銷產品環形統計圖' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { name:'產品分類', type:'pie', selectedMode: 'single', radius: [0, '32%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } } }, { name:'熱賣產品', type:'pie', radius: ['40%', '62%'], grid: { // 控制圖的大小，調整下面這些值就能夠， x: 40, x2: 100, y2: 150 // y2能夠控制 X軸跟Zoom控件之間的間隔，避免覺得傾斜後形成 label重疊到zoom上 }, xAxis: [ { name: "", type: 'category', axisLabel:{ interval:0,//橫軸信息所有顯示 rotate:-30 //-30度角傾斜顯示 } }], label: { normal: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { fontSize: 16, lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } } }, } ] }); //TODO 動態綁定數據,此請求地址爲本人業務的數據處理反饋 $.post("{:url('cms/analyze/hotGoodsPie')}").done(function (data) { //由於我返回的數據是 json 形式，此處須要進行解析處理！ var resData = JSON.parse(data); myChart.setOption({ series: [{ data:resData.data.catInfo }, { data:resData.data.goodsInfo }] }); }); </script>
尤爲要注意這一句的使用： "var resData = JSON.parse(data);"css
③. 鄙人處理返回的數據形式
- 這只是數據舉例，採用框架爲
ThinkPHP5.1.2
{ "status":1,"message":"success", "data":{ "goodsInfo":[ { "name":"\u7eb3\u5b9d\u5e1d\u4e3d\u829d\u58eb\u5976\u916a\u5a01\u5316\u997c\u5e72145g*5","value":3}, { "name":"\u4e2d\u539fG7100%\u901f\u6eb6\u5496\u5561800g*2","value":3}, { "name":"\u65bd\u5df4\u6d01\u80a4\u6c90\u6d74\u9732 200ml","value":1}, { "name":"\u65bd\u5df4\u6d01\u80a4\u6c90\u6d74\u9732 400ml","value":1}, { "name":"\u65bd\u5df4\u7c89\u523a\u62a4\u7406\u556b\u55b1 10ml","value":2}, { "name":"\u96ea\u82b1\u79c0\u6ecb\u76c8\u808c\u672c\u6da6\u989c\u6c34125ml","value":1}, { "name":"\u9038\u4e50\u8212\u6d53\u7f29\u6d17\u8863\u6db2\uff08\u85b0\u8863\u8349\uff09 1.5L","value":1}, { "name":"\u9038\u4e50\u8212\u5185\u8863\u4e13\u7528\u6d53\u7f29\u6d17\u8863\u6db2 750ml","value":1}, { "name":"\u5929\u7136\u4e4b\u6249\u91ce\u751f\u59dc\u76c8\u6da6\u6d17\u53d1\u9732 532ml","value":1}, { "name":"\u7ef4\u53ef\u4e1d \u96f6\u611f\u536b\u751f\u5dfe -\u65e5\u7528\u62a4\u7ffc\u578b-\u91cf\u8d29\u88c5225mm 24\u7247","value":1}], "catInfo":[ { "name":"\u5f69\u5986","value":3}, { "name":"\u65b9\u4fbf\u901f\u98df","value":4}, { "name":"\u9762\u90e8\u62a4\u80a4","value":4}, { "name":"\u9999\u6c34\u7cfb\u5217","value":1}, { "name":"\u5934\u90e8\u62a4\u7406","value":1}, { "name":"\u5973\u6027\u79c1\u62a4","value":2}, { "name":"\u8eab\u4f53\u62a4\u7406","value":2}, { "name":"\u997c\u5e72\u86cb\u7cd5","value":3}, { "name":"\u5bb6\u5ead\u6e05\u6d01","value":4}, { "name":"\u65e5\u5e38\u9632\u62a4","value":3}] }}
④. 如上配置事後，獲得的效果以下：
3、附錄
-
鄙人蔘考的官方實例爲：Nested Pies(嵌套環形圖)html
-
因我的的業務需求，進行了簡單的處理，從視圖上看只是去掉了左側的圖示列表而已java
-
再次提醒一下，通常後臺請求接口返回的都是"JSON"數據，因此須要
上述的處理方法：var resData = JSON.parse(data);web -
附錄一個自行配置的柱狀數據圖，新大陸仍是須要本身去發現的！
json
本文同步分享在 博客「moTzxx」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。瀏覽器