let sqlList = [{ "TYPE": "left", "NAME": "互联网单车企业", "ID": "互联网单车企业", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "left", "NAME": "厅港航中心", "ID": "厅港航中心", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "left", "NAME": "交通控股", "ID": "交通控股", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "center", "NAME": "公路中心", "ID": "公路中心", "NUM": null, "UNIT": null, "TEXT": null }, { "TYPE": "right", "NAME": "单车企业", "ID": "单车企业", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "right", "NAME": "航运中心", "ID": "航运中心", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "right", "NAME": "大数据管理中心", "ID": "大数据管理中心", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "right", "NAME": "UFO中心", "ID": "UFO中心", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }, { "TYPE": "right", "NAME": "Demo中心", "ID": "Demo中心", "NUM": 67893, "UNIT": "万条", "TEXT": "单车数据,GPS数据等" }]
let data = {
left: [],
right: [],
center: {}
}
sqlList.forEach(item => {
if (item.TYPE === 'left') {
data.left.push(item)
} else if (item.TYPE === 'right') {
data.right.push(item)
} else if (item.TYPE === 'center') {
data.center = item
}
})
let width = 1300
let height = 800
let boxWidth = 238
let boxHeight = 100
let links = []
let coords = []
let dataOpt = []
// 获取左右的长度
let data_left_len = data.left.length
let data_right_len = data.right.length
let left_margin = height / data_left_len
let right_margin = height / data_right_len
/**
* @Author: zhangjinhao
* @Date 2024-06-07 09:52:25
* @Describe: 获取中位数
*/
const middleFun = (len) => {
if (len % 2 === 0) { //判断是奇数还是偶数
return (len / 2 + (len / 2 - 1)) / 2
} else {
return parseInt(len / 2)
}
}
//获取中位数
let middle_left = middleFun(data_left_len)
let middle_right = middleFun(data_right_len)
//处理中间数据
data.center.x = width / 2
data.center.y = height / 2
console.log(data, '==data');
data.center.value = [data.center.x, data.center.y]
data.center.label = {
show: true
}
data.center.symbol = 'image://https://img.isqqw.com/profile/upload/2024/06/07/b6a473c6-fdbe-4a97-9944-99eac1fb79a7.png'
data.center.symbolSize = [boxWidth, boxHeight]
data.center.label = {
show: true,
formatter: function (params) {
return '{a|' + params.data.NAME + '}'
},
rich: {
a: {
color: 'red',
align: 'center',
fontSize: 36
}
}
}
console.log(data.center, '==data.center')
dataOpt.push(data.center)
data.left.forEach((left, index) => {
left.x = 0
left.y = left_margin * (index + 0.5)
left.value = [left.x, left.y]
let coord = []
if (index < middle_left) { //上半部
left.lineStyle = {
curveness: '-0.15'
}
coord = {
coords: [
[left.x + boxWidth / 2, left.y],
[data.center.x - boxWidth / 2, data.center.y]
],
lineStyle: left.lineStyle
}
} else if (index > middle_left) { //下半部
left.lineStyle = {
curveness: 0.15
}
coord = {
coords: [
[left.x + boxWidth / 2, left.y],
[data.center.x - boxWidth / 2, data.center.y]
],
lineStyle: left.lineStyle
}
} else {
left.lineStyle = {
curveness: 0
}
coord = {
coords: [
[left.x + boxWidth / 2, left.y],
[data.center.x - boxWidth / 2, data.center.y]
],
lineStyle: left.lineStyle
}
}
let link = {
source: data.center.ID,
target: left.ID,
lineStyle: left.lineStyle
}
left.symbol = 'image://https://img.isqqw.com/profile/upload/2024/06/07/b6a473c6-fdbe-4a97-9944-99eac1fb79a7.png'
left.symbolSize = [boxWidth, boxHeight]
links.push(link)
coords.push(coord)
dataOpt.push(left)
})
data.right.forEach((right, index) => {
let coord = []
right.y = right_margin * (index + 0.5)
right.value = [width, right.y]
if (index < middle_right) { //下半部
right.lineStyle = {
curveness: '-0.15'
}
coord = {
coords: [
[data.center.x + boxWidth / 2, data.center.y],
[width - boxWidth / 2, right.y]
],
lineStyle: right.lineStyle
}
} else if (index > middle_right) {
right.lineStyle = {
curveness: 0.15
}
coord = {
coords: [
[data.center.x + boxWidth / 2, data.center.y],
[width - boxWidth / 2, right.y]
],
lineStyle: right.lineStyle
}
} else {
right.lineStyle = {
curveness: 0
}
coord = {
coords: [
[data.center.x + boxWidth / 2, data.center.y],
[width - boxWidth / 2, right.y]
],
lineStyle: right.lineStyle
}
}
let link = {
source: data.center.ID,
target: right.ID,
lineStyle: right.lineStyle
}
right.symbol = 'image://https://img.isqqw.com/profile/upload/2024/06/07/b6a473c6-fdbe-4a97-9944-99eac1fb79a7.png'
right.symbolSize = [boxWidth, boxHeight]
links.push(link)
coords.push(coord)
dataOpt.push(right)
})
option = {
//你的代码
animation: false,
tooltip: { show: false },
xAxis: { show: false, type: 'value', max: width },
yAxis: { show: false, type: 'value', max: height },
series: [
{
type: 'graph',
coordinateSystem: 'cartesian2d',
symbolSize: 30,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 8],
itemStyle: {
borderWidth: 1,
},
label: {
show: true,
lineHeight: 20,
borderWidth: 0,
color: '#c7254e',
formatter: function (params) {
return '{a| ' + params.data.NAME + ' }\n{b| ' + params.data.NUM + ' }{c| ' + params.data
.UNIT + ' }\n{x| ' + params.data.TEXT + ' }'
},
rich: {
a: {
color: 'red',
lineHeight: 10,
align: 'center'
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40,
align: 'center'
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4,
align: 'center'
},
}
},
data: dataOpt,
// links: coords,
lineStyle: {
opacity: 1,
color: '#111',
},
},
{
type: 'lines',
coordinateSystem: 'cartesian2d',
lineStyle: {
width: 3,
},
effect: {
show: true,
symbolSize: 6,
period: 2,
color: '#5470c6',
trailLength: 0, // 拖影
},
data: coords,
},
]
};