Angularjs 中将api接口数据传入echarts关系图
最近在开发前端界面，考虑到如何更好直观形象的展示数据，让用户一眼就能看懂，于是公司大佬说让我去echarts 找一找关系图。
前景提要
由于之前端用的是angularjs，本人是前端小白，对angularjs也是刚入手，在网上找了很久，看看有没有大佬在使用过angularjs 中使用echarts，但数据都是静态数据，对我这种新手来说，不能Crtl+C,嘻嘻嘻。于是记录一下，希望能帮到其他人。
api数据格式，这是一个数组，里面是对象。数据的意思是多个手机连接Wi-Fi。Ap_name 是Wi-Fi名称，AClient 是 设备MAC。let’s go …
开整
首先导入echarts必要的的js包。
<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.min.js"></script>
前端界面是这样的
<div ng-controller="echarts1">
<div hello-echarts id="echartstest" style="width: 800px;height:600px;"></div>
</div>
这里就不讲angularjs的基本知识啦，百度了一圈，angualrjs 中使用echarts 都是在directive中使用，直接上代码。
app.controller('echarts1',function ($rootScope,$scope,$http,) {
}).directive('helloEcharts',function () {
return{
restrict:'AE',
template:'<div>这是一个关系网</div>',
controller:function ($scope,$http) {
$http({
method:'GET',
url:'http://127.0.0.1:5000/Ainfo', 接口数据
xhrFields: {withCredentials: true},
}).then(function successCallback (response) {
//console.log(response.data.Ainfo);
$scope.Ainfotable=response.data.Ainfo;
$scope.Binfotable = response.data.Binfo;
$scope.notAStation = response.data.notAStation;
//console.log($scope.Binfotable);
var info=$scope.Ainfotable;
var info1 = $scope.Binfotable;
var info2 = $scope.notAStation;
nodes=[];
links=[];
nodes1=[]; //手机
nodes2=[]; //Wi-Fi
nodes3=[]; 没连接Wi-Fi的手机
//links=[];
for(let i=0;i<info.length;i++){
//console.log(info[i].Ap_name+i);
nodemessage = {
"name": info[i].AClient,//节点名称
"value": 3,
"category": 1,//与关系网类别索引对应
"symbolSize":20,
// "x":Math.random()*50, // 点在X轴的位置
// "y":Math.random()*50, //点在Y轴的位置，确定节点的位置
"itemStyle":{
normal:{
// color:'blue',
}
}
};
nodes1.push(nodemessage)
}
for(var k=0;k<info1.length;k++){
nodemessage2 = {
"name": info1[k].Ap_name,//节点名称
"value": info1[k].Ap,
"category": 0,//与关系网类别索引对应
"symbolSize":30,
// "x":Math.random()*50,
// "y":Math.random()*50,
//"symbol":"image://res/wifi11.png",
};
nodes2.push(nodemessage2);
}
for(var p=0;p<info2.length;p++){
nodemessage3 = {
"name":info2[p].mac,
"value":'未连接Wi-Fi',
"category":2,
"symbolSize":15,
}
nodes3.push(nodemessage3);
}
nodes=[...nodes1,...nodes2,...nodes3]; // 讲所有的节点都放在同一个数组
console.log(nodes);
for(var j=0;j<info.length;j++){ //节点之间的关系，source 是对应wifi节点的name，target对应的是手机的 name 。
link1={
"source":info[j].Ap_name,
"target":info[j].AClient
};
links.push(link1);
}
var categories=[{name:'Wi-Fi'+'('+info1.length+')'},{name:'Client'+'('+info.length+')'},
{name:'NoClient'+'('+info2.length+')'}];//节点的类别，对应的是节点数据中的category
var myChart = echarts.init(document.getElementById('echartstest')) //获取界面的元素并初始化echarts.
var option = {
title:{ //标题
text: 'Wi-Fi连接情况',
// subtext: 'Default layout', //副标题
top: 'top', //标题上下的位置
left: 'middle' //标题左右的位置
},
tooltip:{},
legend: {
x:'left',
data: categories.map(function (a) {
return a.name
})//此处的数据必须和关系网类别中name相对应
},
series: [{
name:'Wi-Fi',
type: 'graph', //关系图
layout: 'force', //引力场模式
roam:'true',
focusNodeAdjacency:true,
animation: false,
legendHoverLink:true,
edgeSymbol: ['circle'],
edgeSymbolSize: [4],
ribbonType:false,
label: {
normal: {
show:true,
position: 'right'
}
},
emphasis:{
lineStyle:{
width:10
}
},
itemStyle:{ /每个节点的样式
normal:{
borderColor:'#fff',
borderWidth:1,
shadowBlur:100,
// shadowColor:'rgba(0, 0, 0, 0.3)'
}
},
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
lineStyle:{ //线的样式
color:'#438eb9',
curveness:0.3,
type:'curve'
},
draggable: true,//节点是否可以拖动
data:nodes,//节点
categories: categories,//分类
force: {
edgeLength: 105,//连线的长度
repulsion: 100 //子节点之间的间距
},
links:links
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
},
}
});
嗯嗯，不错，看了一遍，注释写的很详细，和我一样新手不理解节点（nodes）、类别(category)、连接(link)的，可以看看注释，然后对照一下代码。有啥问题可以留言噢～～
对了，还有效果图
