react中实现拓扑图关系图
需求echarts代码react代码
需求
项目中的原型图需要使用react实现一个拓扑图（关系图） 通过查找，找到了可以使用的类似的原型：以下图片地址。 通过项目需要以及修改，形成了下边的样式
echarts代码
// 调试页面回打印出点击的节点名称
var size = 50; //节点大小
var listdata = [];
var links = [];
var legendes = ["手机IMSI", "人脸ID", "车牌号码", "人脸ID"];
var texts = [];
var phoneNum = {
"手机号:13856978256": "13856978256",
"手机号:13998745632": "13998745632",
"手机号:18812345678": "18812345678",
"手机号:16812345678": "16812345678",
"手机号:13856971111": "13856978256",
"手机号:13998742222": "13998745632",
"手机号:18812344444": "18812345678",
"手机号:16812343333": "16812345678",
"手机号:13878978256": "13856978256",
"手机号:137895632": "13998745632",
};
var phoneIMSI =["", "", "","", "", "","", "", "", "" ]
var mainRelationShip = {
人脸ID: "732"
}
function setDataPerson(json, n) {
var i = 0;
for (var p in json) {
listdata.push({
x: 50,
y: 100,
"name": p,
"showName": json[p],
"symbol":'image://'+"/asset/get/s/data-1561621393298-zQTG-TuDS.png",
"symbolSize": 70,
"category": n,
"draggable": "false",
formatter: function(params) {
return params.data.showName
},
label:{
position: 'bottom'
}
});
i++;
}
}
function setDataPhone(json, n) {
var i = 0;
for (var p in json) {
listdata.push({
x: i * 50,
y: size + i * 10,
"name": p,
"showName": json[p],
"symbol":'image://'+"/asset/get/s/data-1561621386236-0IGCc48l6.png",
"symbolSize": size,
"category": n,
"draggable": "false",
formatter: function(params) {
return params.data.showName
},
label:{
position: 'bottom'
}
});
i++;
}
}
function setDataCar(json, n) {
var i = 0;
for (var p in json) {
listdata.push({
x: i * 50,
y: size + i * 10,
"name": p,
"showName": json[p],
"symbol":'image://'+"/asset/get/s/data-1561621379686-rZHoryrBV.png",
"symbolSize": size,
"category": n,
"draggable": "false",
formatter: function(params) {
return params.data.showName
},
label:{
position: 'bottom'
}
});
i++;
}
}
function setLinkData(json, relarr, title) {
if (relarr !== "") {
var i = 0;
for (var p in json) {
links.push({
"source": p,
"target": title,
"value": relarr[i],
lineStyle: {
normal: {
// text: relarr[i],
color: 'source'
}
}
});
i++;
}
} else {
for (var p2 in json) {
links.push({
"source": p2,
"target": title,
"value": "",
lineStyle: {
normal: {
color: 'source'
}
}
});
}
}
}
for (var i = 0; i < legendes.length; i++) {
texts.push({
"name": legendes[i]
})
}
setDataPhone(phoneNum, 0);
setDataPerson(mainRelationShip, 3);
setLinkData(phoneNum, phoneIMSI, legendes[3]);
option = {
backgroundColor: '#f7f7f7',
tooltip: {
formatter: '{b}'
},
series: [{
type: 'graph',
layout: 'force',
force: {
repulsion: 80,
gravity: 0,
edgeLength: 150,
layoutAnimation: false,
},
data: listdata,
links: links,
categories: texts,
roam: false,
nodeScaleRatio: 0,
focusNodeAdjacency: false,
lineStyle: {
normal: {
opacity: 0.5,
width: 1.5,
curveness: 0
}
},
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
color: '#000000',
fontWeight: 'normal',
fontSize: "12" //字体大小
},
formatter: function(params) {
return params.data.showName
},
fontSize: 18,
fontStyle: '600',
}
},
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
formatter: "{c}"
}
}
}],
color: ['#e8b842', '#41b1ef', '#667aed', '#347fbb', '#772cdc',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0']
};
const clickFun = param => {
console.log(param.name)
}
myChart.on("click", clickFun);
react代码
在react中使用时遇到了一个异步的问题，通过componentDidUpdate监听了数据的更新变化
import React, { PureComponent } from 'react';
import './index.less';
import * as echarts from 'echarts';
class RelationEcharts extends PureComponent {
constructor(props) {
super(props);
this.chartRef = React.createRef();
this.state = {
//在这里存放对应数据
//数据类型是一个对象，需要做相应的转化展示到页面对应的位置
}
}
componentDidMount() {
this.init(); //发送异步请求，并在请求成功后更新状态
};
componentDidUpdate(prevProps, prevState) {
if (prevState.floorName !== this.state.floorName) {
this.initChart(); //检查更新操作
}
}
init() {
//在这里发送异步请求
}
initChart() {
//在这里引入echarts的配置
}
render() {
return (
);
}
}
export default RelationEcharts ;
文章来源
您阅读本篇文章共花了： 大家都在找：
react.js：react.js中文官网
javascript：javascript怎么开启
ecmascript：ecmascript怎么读
发表评论