效果
文章图片
整个页面代码（附注释），里面getData方法是对接的后台数据，可忽略，只要节点和连线配对了就能实现效果
【前端|VUE + Echart 5.3.2 graph关系图代码】Echart关系图的配置项官方文档https://echarts.apache.org/zh/option.html#series-graph
:-webkit-full-screen {
/* properties */
background-color: white;
}:-moz-full-screen {
/* properties */
background-color: white;
}:-ms-fullscreen {
/* properties */
background-color: white;
}:full-screen { /*pre-spec */
/* properties */
background-color: white;
}:fullscreen { /* spec */
/* properties */
background-color: white;
}如果不想看后台，想直接看静态页面效果，可以把data里面的nodes和links给改了
// 连关系线
links: [
{
source: 1,
target: 0,
relation: {
name: '投资',
id: '1'
}
},
{
source: 2,
target: 0,
relation: {
name: '投资',
id: '1'
}
},
{
source: 2,
target: 1,
relation: {
name: '投资',
id: '1'
}
},
{
source: 1,
target: 2,
relation: {
name: '投资',
id: '1'
}
},
{
source: 2,
target: 3,
relation: {
name: '股东',
id: '1'
}
}
],
//节点
nodes: [
{
id: 0,
name: '甲公司',
symbolSize: 70,
value: 4,
category: 0
},
{
id: 1,
name: '乙公司',
symbolSize: 50,
value: 8,
category: 1
},
{
id: 2,
name: '丙公司',
symbolSize: 50,
value: 4,
category: 1
},
{
id: 3,
name: '侦缉队长贾贵',
symbolSize: 30,
value: 4,
category: 2
}
],
// 分类
categories: [
{
'name': '当前公司',
'keyword': {},
'base': 'HTMLElement',
'itemStyle': { color: 'green' }
},
{
'name': '关联公司',
'keyword': {},
'base': 'WebGLRenderingContext',
'itemStyle': { color: 'red' }
},
{
'name': '股东',
'keyword': {},
'base': 'SVGElement',
'itemStyle': { color: 'blue' }
}
]推荐阅读
- #|Vue----任务列表案例
- Vue|Vue父子组件如何通信（6种）
- 微信小程序|uniapp 微信小程序 下拉刷新
- 青龙面板|青龙面板快手极速版教程
- 浏览器工作原理与实践（八）
- JavaScript class类的基本使用方法你知道吗
- Vue|Vue脚手架（vue-cli）安装与SPA项目创建
- Echarts|Echarts连接数据库使用Ajax的简单使用
- JavaWeb|JavaScript（8）深入理解作用域