// 注意清除画布、解绑点击事件、loading判断等
async detailImgClick(row) {
this.innerModal = true;
this.ifDetail = true;
this.rowGraph = row;
this.vids = []
this.vids.push(this.rowGraph.vid)
var graph = await this.postGraph(this.vids);
var myChart;
myChart = echarts.init(document.getElementById("chartContainer"));
myChart.clear();
myChart.showLoading();
// var graph = {
// categories: [{ name: 'node' }],
// edges: [
// {
// srcId: 'user1node_57',
// dstId: 'user1node_28',
// edgeName: 'atSpace_demand',
// ranking: 0,
// },
// {
// srcId: 'user1node_57',
// dstId: 'user1node_4',
// edgeName: 'isUser',
// ranking: 0,
// isMeasure: false,
// },
// {
// srcId: 'user1node_74',
// dstId: 'user1node_4',
// edgeName: 'isUser',
// ranking: 0,
// isMeasure: false,
// },
// ],
// node: [
// {
// vid: 'user1node_331',
// tag: 'NetworkAccess',
// userType: 1,
// userId: 1,
// vid: 'user1node_331',
// },
// {
// vid: 'user1node_513',
// tag: 'NetworkAccess',
// userType: 1,
// userId: 1,
// vid: 'user1node_513',
// },
// {
// vid: 'user1node_812',
// tag: 'NetworkAccess',
// userType: 1,
// userId: 1,
// vid: 'user1node_812',
// },
// ],
// }
this.ifDetail = false;
var option = await this.setOption(graph);
myChart.hideLoading();
// echarts图表的点击事件，可通过param参数确认点击的对象
let self = this;
myChart.off("click");
myChart.on("click", async function(param) {
console.log(param);
if (self.vids.includes(param.name)) {
self.vids = self.vids.filter(item => item !== param.name);
} else {
self.vids.push(param.name);
}
console.log(self.vids)
if (param.dataType == "node") {
// Node2的 param.dataIndex 值为1
var graph = await self.postGraph(self.vids);
myChart.clear();
var option = await self.setOption(graph);
myChart.setOption(option);
if (param.dataIndex == 1) {
// 判断点击的次数，单数显示Node5数据，双数隐藏
myChart.setOption(option);
}
} else {
console.log("点击了边", param);
}
});
myChart.setOption(option);
// setTimeout(myChart.setOption(option), 500);
// if (option && typeof option === "object") {
// myChart.setOption(option);
// }
window.addEventListener("resize", myChart.resize);
},
async getGraph(vid) {
let params = {
id: this.setID,
userId: this.rowGraph.userId,
fenceId: this.rowGraph.fenceId,
vid: vid
};
let res = (await getGraph(params)).data.data;
return res;
},
async postGraph(vids) {
let params = {
id: this.setID,
vids: vids
};
let res = (await postGraph(params)).data.data;
return res;
},
setOption(graph) {
var option = {
title: {
text: "拓扑图",
color: "black"
},
legend: [
{
data: graph.categories.map(function(a) {
return a.name;
})
}
],
tooltip: {
show: true,
trigger: "item",
formatter: function(params) {
if (params.dataType === "edge") {
// return param.data.value;
return (
'edgeName：' +
params.data.tipData.edgeName +
"" +
"
" +
'isMeasure：' +
params.data.tipData.isMeasure +
"" +
"
" +
'isMeasure：' +
params.data.tipData.isQoe +
"" +
"
" +
'ranking：' +
params.data.tipData.ranking +
"" +
"
" +
'trueData：' +
params.data.tipData.trueData +
"" +
"
" +
'trueEdge：' +
params.data.tipData.trueEdge +
"" +
"
" +
'trueLevel：' +
params.data.tipData.trueLevel +
""
);
}
// return param.data.value;
return (
'Tag：' +
params.data.tipData.tag +
"" +
"
" +
'deviceModel：' +
params.data.tipData.deviceModel +
"" +
"
" +
'createTime：' +
params.data.tipData.createTime +
"" +
"
" +
'fenceId：' +
params.data.tipData.fenceId +
"" +
"
" +
'userId：' +
params.data.tipData.userId +
"" +
"
"
);
}
},
series: [
{
type: "graph",
layout: "force", // 力引导布局，不包含节点中提供的 x， y 作为节点的位置
// data: graph.nodes,
// links: graph.links,
// categories: graph.categories,
data: graph.nodes.map(function(node) {
return {
category: 0,
name: node.vid,
tipData: node
};
}),
edges: graph.edges.map(function(edge) {
return {
source: edge.srcId,
target: edge.dstId,
tipData: edge
};
}),
categories: graph.categories,
// large: true,
// largeThreshold: 1000,
label: {
show: true,
position: "bottom",
formatter: "{b}"
},
symbolSize: 18, // 节点大小
labelLayout: {
hideOverlap: false
},
scaleLimit: {
min: 0.4,
max: 2
},
roam: false,
draggable: true,
// focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
// animationDurationUpdate: 0, //更新数据，会导致布局错乱
edgeSymbol: ["none", "arrow"],
force: {
edgeLength: 200, // 边的两个节点之间的距离
repulsion: 100, //节点之间的斥力因子。
gravity: 0.02 //节点受到的向中心的引力因子。
},
lineStyle: {
// color: "#31354B",
// curveness: 0.1
},
autoCurveness: 0.01, //多条边的时候，自动计算曲率
emphasis: {
focus: "",
lineStyle: {
width: 5
}
},
edgeLabel: {
//边的设置（节点之间的关系）
show: true,
position: "middle",
fontSize: 12,
lineHeight: 1, //字与线之间的距离
textStyle: {
fontSize: 12 //line线上字体大小
},
formatter: params => {
return params.data.tipData.edgeName;
}
}
}
]
};
return option;
}
* 自定义图片
*/
for (var i = 0;i < data.length;i++){
if (data[i].type == 'Internet'){
data[i].symbol = 'image://image/internet.png';
data[i].symbolSize = 70;
}
if (data[i].type == 'switch'){
data[i].symbol = 'image://image/switch.png';
}
if (data[i].type == 'hub'){
data[i].symbol = 'image://image/hub.png';
}
if (data[i].type == 'computer'){
data[i].symbol = 'image://image/computer.png';
}
if (data[i].type == 'rooter'){
data[i].symbol = 'image://image/rooter.png';
}
if (data[i].type == 'service'){
data[i].symbol = 'image://image/service.png';
}
if (data[i].type == 'print'){
data[i].symbol = 'image://image/print.png';
}
if (data[i].type == 'phone'){
data[i].symbol = 'image://image/phone.png';
}
