一、需求,實現 網頁連接分享 閱讀瀏覽量關係圖,不一樣分支不一樣顏色,同個分流同一個顏色。
二、使用echart進行數據渲染,對option配置動態渲染。
代碼結構:
html:css
<div id="outer"><div id="main"></div></div> <div id="noneData" class="none-data"><img src="../images/videoShareHimg.png"/></div> <p class="bottom-txt">僅顯示微信分享數據</p>
css:html
<head> <title>瀏覽量</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/> <script th:src="@{/plugins/jquery.js}"></script> <script th:src="@{/plugins/echartsv4/echarts.min.js}"></script> <style> * {margin: 0; padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;} html,body{margin: 0;position: relative;} .none-data{width: 72px;height: 72px;position: absolute;left:50%;top:50%;margin-left: -36px;margin-top: -36px;display: none;} .bottom-txt{position: fixed;left: 0;bottom: 0;line-height:2.5;font-size:18px;color: #ccc;margin: 0;text-align: center;width: 100%;} #main{width:1000px;height:1000px;margin:0 auto;box-sizing: border-box;} #main.fullwidth{width:100%;height:100%;} canvas{-webkit-transform: translateZ(0); transform: translateZ(0);} </style> </head>
js:jquery
$(document).ready(function(){ $('#outer').css({'width' : $(window).width(), 'height' :$(window).height()}); var yy = []; var leftOption="12%"; var rightOption="12%"; var topOption="12%"; var bottomOption="12%"; if(dataStr){ yy = dataStr.children; var rr =[]; var firstL=0; var secondL=0; for (var i = 0; i < yy.length; i++) { if (yy[i].children == null) { firstL=firstL+1; }else{ var rr = yy[i].children; for (var q = 0; q < rr.length; q++) { if(rr[q].children != null){ secondL=secondL+1; } } } } if(firstL==yy.length || (yy.length == rr.length && secondL==0)){ $('#main').addClass('fullwidth'); }else if(secondL==0){ topOption="25%"; } initTreeData(yy); $('#main').removeAttr('_echarts_instance_'); }else { $('#main').hide(); $('#noneData').show(); } function convertData(aa) { var v1 = {}; var v2 = {}; var v3 = {}; var v4 = {}; var v5 = {}; var t1 = []; var t2 = []; var t3 = []; var t4 = []; var t5 = []; var t = []; for (var i = 0; i < aa.length; i++) { v1={}; v1['name'] = aa[i].browserName; v1['value'] = aa[i].num; v1['expandAndCollapse']=true; var itemStyle ={}; itemStyle['color']=aa[i].itemStyle; itemStyle['borderColor']=aa[i].itemStyle; v1['itemStyle'] = itemStyle; var lineStyle = {}; lineStyle['color'] = aa[i].lineStyle; v1['lineStyle'] = lineStyle; if (aa[i].children != null) { var bb = aa[i].children; for (var q = 0; q < bb.length; q++) { v2={}; v2['name'] = bb[q].browserName; v2['value'] = bb[q].num; v2['expandAndCollapse']=true; var itemStyle ={}; itemStyle['color']=bb[q].itemStyle; itemStyle['borderColor']=bb[q].itemStyle; v2['itemStyle'] = itemStyle; var lineStyle = {}; lineStyle['color'] = bb[q].lineStyle; v2['lineStyle'] = lineStyle; if(bb[q].children != null){ var cc = bb[q].children; for (var b = 0; b < cc.length; b++) { console.log(); v3={}; v3['name'] = cc[b].browserName; v3['value'] = cc[b].num; v3['expandAndCollapse']=true; var itemStyle ={}; itemStyle['color']=cc[b].itemStyle; itemStyle['borderColor']=cc[b].itemStyle; v3['itemStyle'] = itemStyle; var lineStyle = {}; lineStyle['color'] = cc[b].lineStyle; v3['lineStyle'] = lineStyle; if(cc[b].children != null){ var dd=cc[b].children; for (var j = 0; j < dd.length; j++) { console.log(); v4 = {}; v4['name'] = dd[j].browserName; v4['value'] = dd[j].num; v4['expandAndCollapse'] = true; var itemStyle = {}; itemStyle['color'] = dd[j].itemStyle; itemStyle['borderColor'] = dd[j].itemStyle; v4['itemStyle'] = itemStyle; var lineStyle = {}; lineStyle['color'] = dd[j].lineStyle; v4['lineStyle'] = lineStyle; if(dd[j].children != null){ var ee=dd[j].children; for (var r = 0; r < ee.length; r++) { console.log(); v5 = {}; v5['name'] = ee[r].browserName; v5['value'] = ee[r].num; v5['expandAndCollapse'] = true; var itemStyle = {}; itemStyle['color'] = ee[r].itemStyle; itemStyle['borderColor'] = ee[r].itemStyle; v5['itemStyle'] = itemStyle; var lineStyle = {}; lineStyle['color'] = ee[r].lineStyle; v5['lineStyle'] = lineStyle; t5.push(v5); } v4['children'] = t5; t5=[]; } t4.push(v4) } v3['children'] = t4; t4=[]; } t3.push(v3); } v2['children'] = t3; t3=[]; } t2.push(v2); } }; v1['children'] = t2; t2=[]; t.push(v1); } return t; }; function treeData(data) { var res = []; var tree = {}; if(data!=0){ var item=convertData(data); tree["children"] = item; } tree["symbol"]= 'image://../images/videoShareHimg.png'; tree["symbolSize"]= '40'; tree["itemStyle"]='{borderWidth:4,opacity:\'0.9\'}'; tree["value"]= ''; res.push(tree); return res; }; function initTreeData(listData) { var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option = { series: [{ type: 'tree', data: treeData(listData), left:leftOption, right:rightOption, top: topOption, bottom: bottomOption, layout: 'radial', symbol: 'emptyCircle', symbolSize: 12, initialTreeDepth: 5, // animationDurationUpdate: 750, itemStyle: { borderWidth:3 }, lineStyle:{ width:0.8 }, label:{ offset:[5,0], formatter: ['{value|{c}}','{name|{b}}'].join('\t'), rich: { value: { fontWeight:'bold', fontSize:'14' }, name: { color: '#999', fontSize:'10' } } }, leaves:{ label:{ offset:[-2,0], } } }] }); } }); window.onload = function(){ setTimeout(function () { if(dataStr) { if(!($('#main').hasClass('fullwidth'))){ $(window).scrollLeft(300); $(window).scrollTop(350); } } },200); };
須要data數據格式:web
{ "data": { "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": null, "browserAccountId": null, "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": null, "browserName": null, "num": null, "children": [ { "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": null, "browserAccountId": "AA", "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": "AA_icon", "browserName": "AA_name", "num": 48, "children": [ { "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": "AA", "browserAccountId": "AAA", "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": "AAA_icon", "browserName": "AAA_name", "num": 32, "children": null, "itemStyle": "#46bfd1", "lineStyle": "#46bfd1" }, { "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": "AA", "browserAccountId": "AAB", "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": "AAB_icon", "browserName": "AAB_name", "num": 12, "children": null, "itemStyle": "#46bfd1", "lineStyle": "#46bfd1" } ], "itemStyle": "#46bfd1", "lineStyle": "#46bfd1" }, { "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": null, "browserAccountId": "AE", "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": "AE_icon", "browserName": "AE_name", "num": 5, "children": null, "itemStyle": "#46bfd1", "lineStyle": "#46bfd1" } ], "itemStyle": null, "lineStyle": null }, "code": 200, "message": "success" }
本例子後臺提供數據格式:canvas
{ "data": { "id": null, "passportId": null, "clientType": null, "houseVideoId":null, "status":null, "forwarderAccountId": null, "browserAccountId": null, "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": null, "browserName": null, "num": null, "children":[{ "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": null, "browserAccountId": "ozkr5v_vVBvwDtzUEg0zi7itZHPc", "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": "http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erFBhKwBzHYyN6PwKb71GuGD9z6r3hVAxnD2nZ66zUS2vghR8cbxIldL42610kB7gEGC1eEhQdCsw/132", "browserName": "DerMing_You", "num": 4, "children": null, "itemStyle": "#46bfd1", "lineStyle": "#46bfd1" }, { "id": null, "passportId": null, "clientType": null, "houseVideoId": null, "status": null, "forwarderAccountId": null, "browserAccountId": "ozkr5vzzFtimKuCZA0Igwn18Wgek", "firstForwardId": null, "createTime": null, "updateTime": null, "createUserId": null, "updateUserId": null, "browserIcon": "", "browserName": "Cubi燁", "num": 2, "children": null, "itemStyle": "#7a84f5", "lineStyle": "#7a84f5" }], "itemStyle":null, "lineStyle":null }, "code": 200, "message": "success" }
三、結果預覽微信
主要要點在於將後臺給的數據 從新組合爲所須要的data數據格式。
本案例後臺給到數據返回的dataStr.children數據格式爲:echarts