效果图：
代码：
<template><div id="serveGraph" style="height: 100%; width: 100%; z-index: 88;"></div>
</template>
<script>
import { defineComponent,reactive,toRefs,onMounted,watch } from 'vue'
import * as echarts from 'echarts'export default defineComponent({name:'drawGraph',props:{graphData:{type:Object,default:{data:[],link:[],}},},emits:[],components:{},setup(props,ctx) {const state = reactive({data:[],links:[],paramsData:[],myChart: null,})onMounted(() => {})// 初始化数据const init = function() {state.data = [];state.links = [];let dataList = props.graphData.data;for(var i = 0; i < dataList.length; i++) {var obj = {"name": dataList[i].name,"type":'1',symbol: dataList[i].master == true ? 'image://static/images/serve-1.png' : 'image://static/images/serve-2.png',"symbolSize":[90,90],"dragable":false,"itemStyle":{},"dataDetail":dataList[i],"category":1,"lineStyle":{width:1,},"label":{show:true, // 是否显示标签offset:[0,70],fontSize:16,color:'#5B607D'},}state.data.push(obj)}draw();}// 绘制图表const draw = function() {var option = {// 图表标题title:{show: false, // 显示策略，默认值true, 可选为: true(显示) | false (隐藏)text:'服务器分布', // 主标题文本， '\n'指定换行x:'center', // 水平安放位置，默认为左对齐，可选为：'center','left','right',{number}（x坐标，单位px）y:'center', // // 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）//textAlign: null // 水平对齐方式，默认根据x设置自动调整//backgroundColor: 'rgba(0,0,0,0)',//borderColor: '#ccc', // 标题边框颜色//borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）//padding: 5, // 标题内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同cssitemGap:40, //主副标题纵向间隔， 单位为px,默认为10 textStyle: {fontSize: 50,fontWeight: 'bolder',color: '#fff' // 主标题文字颜色 },subtextStyle: {color: '#aaa' // 副标题文字颜色},},xAxis: {show: false,type: "value"},yAxis: {show: false,type: "value"}, tooltip: {trigger: 'item',textStyle: { fontSize: '100%'},axisPointer:{},position: 'top',show:true,borderColor: 'red',backgroundColor:'#fff',textStyle:{color:'#5B607D'},shadowColor: 'none',borderWidth: '0', //边框宽度设置1borderColor: 'transparent', //设置边框颜色 enterable:true, formatter: params => { let string = ``;string += `<div style="min-width:200px;max-height:200px;background:#fafafa"><div style="padding:10px;background:#fafafa">服务器信息详情</div><div style="padding:10px;background:#fafafa"><div style="height:30px"><span style="display:inline-block;width:80px">名称：</span> <span>${params.data.name}</span></div></div></div>`return string;},}, // backgroundColor:'rgba(255, 255, 255, 0.5)',// animationDurationUpdate: function (idx) {// // 越往后的数据延迟越大// return idx * 1000;// },// animationEasingUpdate: 'bounceIn',series: [{type: 'graph',name: "服务器详情信息",layout: 'force',force: {// initLayout:5 , // 力引导的初始化布局，默认使用xy轴的标点repulsion: 1300, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。gravity: 0.4, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。edgeLength: 100, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长layoutAnimation: true // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画// 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。 },lineStyle: { // ========关系边的公用线条样式。color: '#e2e7f5',width: 2, //线的粗细type: 'dashed', // 线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）globalCoord: false,curveness: 0.2, // 线条的曲线程度，从0到1opacity: 1// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5},edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: 4,edgeLabel: { show: false, textStyle: { fontSize: 10,color:'#fff ' }, formatter: "{c}" },roam: true,label: {show: true,color: "#fff"},data: state.data,links: props.graphData.link,draggable:true,zoom:1,},]}state.myChart = echarts.init(document.getElementById('serveGraph'));window.addEventListener('resize',() => {state.myChart.resize();})state.myChart.setOption(option);}watch(()=>props.graphData,(val) => {init();},{// immediate:true,deep:true,}) return {...toRefs(state),}}
})</script>
<style lang="scss" scoped></style>
)
