echarts实现组织架构图
最近在项目终于到了这样一个需求,需要实现一个网站的拓扑图,如下:
但是在网上找了许久相关的库也没找到满意的,不过找的过程中发现了这个
链接网络拓扑图,有了灵感,于是对其进行改造,哈哈哈,代码链接如下:echarts实现组织结构图,代码有很多不足的地方,仅供在开发中遇到同样问题的你一个解决的思路。
上面地址挂了,另见echarts实现组织结构图 链接都挂了,贴代码吧
//引用脚本url地址https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js
var testdata = [{
mainId: '0000',
parentIds: ['0001', '0002', '0003', '0004', '0011'],
siteName: '该站点',
saleTotal: '98487',
upsite: '5',
subordinate: '8',
rank: '10'
},
{
mainId: '0001',
parentIds: ['321', '332', '0323', '2334'],
siteName: '上级1',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0002',
parentIds: ['12131', '23102'],
siteName: '上级2',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0003',
parentIds: ['2211'],
siteName: '上级3',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0004',
parentIds: ['151', '08042'],
siteName: '上级4',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0011',
parentIds: ['151', '08042'],
siteName: '上级5',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0005',
parentIds: ['0000'],
siteName: '下级1',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0006',
parentIds: ['0000', '08042'],
siteName: '下级2',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0007',
parentIds: ['0000'],
siteName: '下级3',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0008',
parentIds: ['0000'],
siteName: '下级4',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0009',
parentIds: ['0000'],
siteName: '下级5',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0010',
parentIds: ['0000'],
siteName: '下级6',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0011',
parentIds: ['0000'],
siteName: '下级7',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
},
{
mainId: '0012',
parentIds: ['0000'],
siteName: '下级8',
saleTotal: '98487',
upsite: '5',
subordinate: '14',
rank: '10'
}
]
var parentsList = []
var testline = []
let upSiteNum // 上级站点个数
let nextSiteNum // 下级站点个数
for (const i in testdata) {
if (testdata[i].mainId === '0000') {
testdata[i].x = 1000 / 2
testdata[i].y = 500
parentsList = testdata[i].parentIds
upSiteNum = testdata[i].upsite > 10 ? 10 : testdata[i].upsite
nextSiteNum = testdata[i].subordinate > 10 ? 10 : testdata[i].subordinate
} else {
const res = _.includes(testdata[i].parentIds, '0000')
if (res) {
// 下级
testdata[i].x = (i - upSiteNum - 1) * (1000 / nextSiteNum)
testdata[i].y = 200
const x = testdata[0].x
const y = testdata[0].y
const coords = []
coords.push([x, y])
coords.push([x, y - 150])
coords.push([(i - upSiteNum - 1) * (1000 / nextSiteNum), y - 150])
coords.push([(i - upSiteNum - 1) * (1000 / nextSiteNum), testdata[i].y])
const a = {
coords: coords
}
testline.push(a)
} else {
testdata[i].x = (i - 1) * (1000 / (upSiteNum - 1))
testdata[i].y = 800
const x = testdata[0].x
const y = testdata[0].y
const coords = []
coords.push([x, y])
coords.push([x, y + 150])
coords.push([(i - 1) * (1000 / (upSiteNum - 1)), y + 150])
coords.push([(i - 1) * (1000 / (upSiteNum - 1)), testdata[i].y])
const a = {
coords: coords
}
testline.push(a)
}
}
}
var nodes = _.cloneDeep(testdata)
var charts = {
nodes: [],
linesData: testline
}
for (var j = 0; j < nodes.length; j++) {
var x = parseInt(nodes[j].x)
var y = parseInt(nodes[j].y)
var node = {
siteName: nodes[j].siteName,
value: [x, y],
symbolSize: 30,
mainId: nodes[j].mainId,
saleTotal: nodes[j].saleTotal,
upsite: nodes[j].upsite,
subordinate: nodes[j].subordinate,
rank: nodes[j].rank,
itemStyle: {
normal: {
color: '#12b5d0'
}
}
}
charts.nodes.push(node)
}
option = {
tooltip: {
formatter: function(params) {
let str = ''
if (params.seriesType === 'graph') {
str = '站点名称:' + params.data.siteName + '<br/>'
str += '销售总额:' + params.data.saleTotal + '元<br/>'
if (params.data.mainId === '0000') {
str += '上级:' + params.data.upsite + '个<br/>'
str += '下级:' + params.data.subordinate + '个<br/>'
} else {
str += '排名:' + params.data.rank + '<br/>'
}
return str
}
}
},
xAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
label: {
normal: {
show: true,
position: 'bottom',
color: '#000000'
}
},
data: charts.nodes
}, {
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
normal: {
width: 2,
color: '#000000',
curveness: 0.3
}
},
data: charts.linesData
}]
};
其他思路
- echarts的关系图,一个节点可以有多个父节点和子节点,也可以实现以上需求,如果节点之间的的连线你有没有其他要求(例如折线),可以采用。
- AntV g6 [便捷的关系数据可视化引擎与图分析工具],不过也需要自行修改样式之类的(https://g6.antv.vision/zh/examples/tree/compactBox)
- highcharts的组织结构图
- 这个特别好,开箱即用,但是不能商用,可以作为个人学习使用。