ThinkPHP5.1 實例配置 ECharts 的使用指導
- 2019 年 10 月 25 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/u011415782/article/details/100519873
一、背景
- 最近因為基本業務的上線應用，需要對網站進行一些統計監控，想到可以拓展使用
echarts, 在此記錄一下簡單的使用方式，以作備忘，也方便後期直接拿來使用
簡要介紹：
ECharts， 一個使用 JavaScript 實現的開源可視化庫; 可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）; 底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化訂製的數據可視化圖表 ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖; 用於地理數據可視化的地圖、熱力圖、線圖; 用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行坐標; 還有用於 BI 的漏斗圖，儀錶盤; 並且支援圖與圖之間的混搭 ......
官方詳情，就移步：—— ECHARTS （商業級數據圖表）
二、使用步驟
- 鄙人的使用環境為
"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);"
③. 鄙人處理返回的數據形式
- 這只是數據舉例，採用框架為
ThinkPHP5.1.2
{"status":1,"message":"success", "data":{ "goodsInfo":[ {"name":"u7eb3u5b9du5e1du4e3du829du58ebu5976u916au5a01u5316u997cu5e72145g*5","value":3}, {"name":"u4e2du539fG7100%u901fu6eb6u5496u5561800g*2","value":3}, {"name":"u65bdu5df4u6d01u80a4u6c90u6d74u9732 200ml","value":1}, {"name":"u65bdu5df4u6d01u80a4u6c90u6d74u9732 400ml","value":1}, {"name":"u65bdu5df4u7c89u523au62a4u7406u556bu55b1 10ml","value":2}, {"name":"u96eau82b1u79c0u6ecbu76c8u808cu672cu6da6u989cu6c34125ml","value":1}, {"name":"u9038u4e50u8212u6d53u7f29u6d17u8863u6db2uff08u85b0u8863u8349uff09 1.5L","value":1}, {"name":"u9038u4e50u8212u5185u8863u4e13u7528u6d53u7f29u6d17u8863u6db2 750ml","value":1}, {"name":"u5929u7136u4e4bu6249u91ceu751fu59dcu76c8u6da6u6d17u53d1u9732 532ml","value":1}, {"name":"u7ef4u53efu4e1d u96f6u611fu536bu751fu5dfe -u65e5u7528u62a4u7ffcu578b-u91cfu8d29u88c5225mm 24u7247","value":1}], "catInfo":[ {"name":"u5f69u5986","value":3}, {"name":"u65b9u4fbfu901fu98df","value":4}, {"name":"u9762u90e8u62a4u80a4","value":4}, {"name":"u9999u6c34u7cfbu5217","value":1}, {"name":"u5934u90e8u62a4u7406","value":1}, {"name":"u5973u6027u79c1u62a4","value":2}, {"name":"u8eabu4f53u62a4u7406","value":2}, {"name":"u997cu5e72u86cbu7cd5","value":3}, {"name":"u5bb6u5eadu6e05u6d01","value":4}, {"name":"u65e5u5e38u9632u62a4","value":3}] }}
④. 如上配置過後，得到的效果如下：
三、附錄
- 鄙人參考的官方實例為：Nested Pies(嵌套環形圖)
- 因個人的業務需求，進行了簡單的處理，從視圖上看只是去掉了左側的圖示列表而已
- 再次提醒一下，一般後台請求介面返回的都是"JSON"數據，所以需要 上述的處理方法：
var resData = JSON.parse(data); - 附錄一個自行配置的柱狀數據圖，新大陸還是需要自己去發現的！
