vue-cli项目中利用Echarts实现关系图
这个实现在echarts3.0官网找了好久的力引导布局图，最后也没法整合到自己项目中，踩坑很久偶然发现了一个链接。
https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb
下面是后端拿到数据的，假数据的话用官网的就行：
首先在main.js中导入echarts：
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
在需要渲染的页面里面定义一个渲染的方法：
drawChart(data,link){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("k"));
// 指定图表的配置项和数据
let option = {
title: {
text: ''
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
legend: {
x: "center",
show: false,
data: ["包含", "包含", '包含']
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 45,
focusNodeAdjacency: true,
roam: true,
categories: [{
name: 'per',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: 'loc',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}, {
name: 'org',
itemStyle: {
normal: {
color: "#ff232b",
}
}
}, {
name: 'time',
itemStyle: {
normal: {
color: "#e6dd1c",
}
}
}, {
name: 'body',
itemStyle: {
normal: {
color: "#c489e6",
}
}
}, {
name: 'sigos',
itemStyle: {
normal: {
color: "#a0e6a5",
}
}
}, {
name: 'check',
itemStyle: {
normal: {
color: "#e6bfac",
}
}
}, {
name: 'disease',
itemStyle: {
normal: {
color: "#859f89",
}
}
}, {
name: 'treatmeot',
itemStyle: {
normal: {
color: "#686767",
}
}
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
edgeSymbolSize: [4, 50],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data:data,
links:link,
// links: [{
// source: 0,
// target: 1,
// category: 0,
// value: '包含'
// },
// ],
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0,
color: "#504a48"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
一个方法接收nodes和link,因为从后端拿数据，所以不管后端数据如何，只要把数据格式修改成官网中假数据的格式就能用了。
官网的nodes属性:data: [{ name: '徐贱云', draggable: true, }, { name: '冯可梁', category: 1, draggable: true, }]
官网的link属性：links: [{ source: 0, target: 1, category: 0, value: '夫妻' }, { source: 0, target: 2, value: '子女' }]
也就是三个属性，在这里我的转换是：
var en={
'name' : '',
'category' :0 ,
'draggable' : false
};
var li={
source: 0, //线的头
target: 0,//线的尾
category: 0,
value: '包含'
};
然后再
var Entities = new Array(); var link=new Array();
最后给自己的en、li初始化完加入进去
Entities.push(Object.assign({},en));
link.push(Object.assign({},li));
初始化完Entities和link以后调用
this.drawChart(Entities,link)
就成功了。
categories：名字上看就是一个category数组，对应的是在node里面category属性，category的值就是对应了数组内部的下标，即可以定义小球的颜色等。
（前端小白：欢迎大家批评指正~~）