使用Echarts实现拓扑结构(graph)
<template>
<div id="overview_2">
<div class="scrollbar-main1" style="height: 91vh; width: 100%">
<el-scrollbar style="height:100%">
<el-card shadow="hover" class="cardItem" header="xx云集群拓扑"
style="display: flex;flex-direction: column;width: 98%">
<div>
<el-popover
placement="top-start"
width="200"
trigger="hover"
content="集群拓扑可以任意拖拽、解绑、发散；鼠标悬停可展示集群region，eg: rg1_hfb3，rg1_bjsh">
<el-button slot="reference" style="float: right; padding: 3px 0" type="text">帮 助</el-button>
</el-popover>
</div>
<div id="chartgraph" class="pie-wrap" style="height: 100%; width: 98%"></div>
</el-card>
</el-scrollbar>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'clustergraph',
data () {
return {}
},
mounted () {
this.getChartGraph()
},
methods: {
getChartGraph () {
this.$ajax.getRequest({
url: '/cmdb_api/clustergraph',
dataType: 'json',
cb (data) {
let datas = JSON.parse(JSON.stringify(data.datas))
let links = JSON.parse(JSON.stringify(data.links))
let chartgraph = echarts.init(
document.getElementById('chartgraph'),
'macarons'
)
let option
option = {
tooltip: {
trigger: 'item'
// formatter: '{a} <br/>{b} : {c}'
},
showContent: true,
color: ['#8378EA',
'#f49f42',
'#ea7ccc',
'#3ba272',
'#ee6666',
'#9a60b4',
'#37A2DA'],
legend: {
show: true,
textStyle: {
fontSize: '15px'
},
data: [{
name: '游戏世界',
icon: 'image://:8111/icon/'
//icon:'image://./images/' //如果用图片img，格式为'image://+icon文件地址'，其中image::后的//不能省略
}, {
name: '数据中心',
icon: 'image://:8111/icon/clopng'
}, {
name: '和平精英',
icon: 'image://:8111/icon/'
}, {
name: '王者荣耀',
// icon: 'image://'+ require("../../assets/graph/")
icon: 'image://:8111/icon/'
}, {
name: '元神',
icon: 'image://:8111/icon/'
}, {
name: '刺激战场',
icon: 'image://:8111/icon/'
}, {
name: '炉石传说',
icon: 'image://:8111/icon/'
}, {
name: '飞车炫舞',
icon: 'image://:8111/icon/'
}
]
},
series: [{
name: '集群信息',
//name : "拓扑图", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: 'graph', //关系图
layout: 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
hoverAnimation: true, //是否开启鼠标悬停节点的显示动画
coordinateSystem: null,//坐标系可选
xAxisIndex: 0,//x轴坐标 有多种坐标系轴坐标选项
yAxisIndex: 0,
force: {
repulsion: 450, //相距距离
edgeLength: [150, 200],
layoutAnimation: true
},
// force : { //力引导图基本配置
// //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
// repulsion : 200,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
// gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
// edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
// layoutAnimation : true
// //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
// },
roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
nodeScaleRatio: 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
draggable: true,//节点是否可拖拽，只在使用力引导布局的时候有用。
focusNodeAdjacency: true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
edgeSymbol: ['none', 'arrow'], //边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
symbolSize: 50,
edgeSymbolSize: 10, //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
itemStyle: {
normal: {
label: {
show: true
}
// borderType: 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
// borderColor: 'rgba(255,215,0,0.4)',//设置图形边框为淡金色,透明度为0.4
// borderWidth: 2,//图形的描边线宽。为 0 时无描边。
// opacity: 1 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis: {
//高亮状态
}
},
lineStyle: {//关系边的公用线条样式
normal: {
color: '#31354B',
width: '1',
type: 'solid',//线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
curveness: 0,
opacity: 1 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},
emphasis: {}
},
label: {
normal: {
show: true,
position: 'bottom',
textStyle: {
color: '#2D2F3B',
fontStyle: 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
fontWeight: 'bolder',
fontFamily: 'sans-serif',
fontSize: 12
}
},
emphasis: {}
},
edgeLabel: {
normal: {
show: false
},
emphasis: {}
},
data: datas,
// datas 结构：
// [{category: 1,name: "服务器1"}]
{
category: 0,
name: "服务器1",
tooltip:{
formatter:'{b}<br />192.168.1.1'
}
},
{
category: 0,
name: "服务器2",
tooltip:{
formatter:'{b}<br />192.168.1.2'
}
},
{
category: 0,
name: "服务器3",
tooltip:{
formatter:'{b}<br />192.168.1.3'
}
},
links: links,
// links 结构 ，用于做关联绑定，只向target
// [{source: '服务器1',target: '服务器2',}]
categories: [{
name: '游戏世界',
symbol: 'image://:8111/icon/'
}, {
name: '数据中心',
symbol: 'image://:8111/icon/'
}, {
name: '和平精英',
symbol: 'image://:8111/icon/'
}, {
name: '王者荣耀',
symbol: 'image://:8111/icon/'
}, {
name: '元神',
symbol: 'image://:8111/icon/'
}, {
name: '刺激战场',
symbol: 'image://:8111/icon/'
}, {
name: '炉石传说',
symbol: 'image://:8111/icon/'
}, {
name: '飞车炫舞',
symbol: 'image://:8111/icon/'
}
]
}]
}
window.onresize = function () {
chartgraph.resize()
}
chartgraph.setOption(option)
}
})
}
}
}
</script>
<style lang="less">
#overview_2 {
.el-card__header {
padding: 8px 8px 8px 8px;
}
.el-card__body {
width: 96%;
height: 96%;
}
}
</style>
<style scoped lang="less">
#overview_2 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
.proms {
margin: 5px 5px 5px 5px;
}
.cardHeader {
width: 98%;
}
.cardItem {
margin-bottom: 2vh;
margin-left: 1%;
width: 96%;
height: 89vh;
}
}
</style>