echart 徑向關係網圖 多重關係圖
一、需求，實現 網頁連接分享 閱讀瀏覽量關係圖，不一樣分支不一樣顏色，同個分流同一個顏色。
二、使用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
相關文章
- 1. echart實現關係圖
- 2. vue + echart 之熱力圖，關係圖
- 3. 網絡關係圖
- 4. Echarts3 關係圖-力導向佈局圖
- 5. networkx網絡關係圖
- 6. UML關係圖
- 7. visjs關係圖
- 8. 關係網絡數據可視化：1. 關係網絡圖&Gephi
- 9. R——相關關係熱圖
- 10. 實體關係圖(ER圖)
- 更多相關文章...
- • Hibernate多對多映射關係 - Hibernate教程
- • Hibernate映射關係 - Hibernate教程
- • NewSQL-TiDB相關
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. echart實現關係圖
- 2. vue + echart 之熱力圖，關係圖
- 3. 網絡關係圖
- 4. Echarts3 關係圖-力導向佈局圖
- 5. networkx網絡關係圖
- 6. UML關係圖
- 7. visjs關係圖
- 8. 關係網絡數據可視化：1. 關係網絡圖&Gephi
- 9. R——相關關係熱圖
- 10. 實體關係圖(ER圖)