echarts关系图java echarts关联关系图

文章目录

• 基本应用
• 节点重名问题解决方案
• 两点之间如何绘制多条连线
• Echarts图随着浏览器窗口的变化而变化

今天要发博客，因为今天再不发，2020就过去啦！

最近需要用到Echarts绘制关系图，在实现的过程中遇到了一些小问题，这里记录一下，方便日后查找。

Echarts入门看这里Echarts基本样式看这里Echarts进阶版样式看这里

基本应用

1. 找一个自己喜欢的Echarts样式
2. 按照该样式要求，封装数据

举个栗子：

样式来源 样式图展示：

// dataInfo节点数据，dataLink关系数据，option图配置信息
// 如果完全使用样例样式就不用修改option，只需将自己的数据根据dataInfo/dataLink的格式封装好就行
let dataInfo = []
let dataLink = []
var option = {}
// 分析dataInfo
// 选取第一项数据来看
// name是节点的属性，显示在节点上的文字，这里的name还是节点的唯一标识，不同节点的name属性不能重复，否则会报错
// category是节点的类型，用以区分节点，比如样例中就是四类节点，分别用四种不同的颜色标识
// symbolSize 是节点的大小
// draggable 控制节点拖拽的交互，默认开启。开启后，可将图中任意节点拖拽到任意位置。若想关闭此交互，只需将值设为 false 
// fixed 节点在力引导布局中是否固定
// value 是节点的位置，和坐标一样的存在
let dataInfo = [{
    name: "浮游植物",
    category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
    symbolSize: 50,
    draggable: true,
    fixed: true,
    value: [0, 150]
}]
// 分析dataLink 
// 选取第一项数据来看
// source 起点
// value 关系
// target 终点
let dataLink = [{
    source: "浮游植物",
    value: "被吃",
    target: "磷虾",
}]

上面的样式分析只针对这个示例样式，若想了解更多有关关系图节点数据的配置项说明信息，请看这里

节点重名问题解决方案

let dataInfo = [{
    name: "浮游植物",
    category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
    symbolSize: 50,
    draggable: true,
    fixed: true,
    value: [0, 150]
}]

官方文档：节点的name不能重复 但是在实际中，会遇到同名节点的情况，比如绘制人物关系图，就很有可能遇到同名的情况；绘制计算结果数据关系图，数据也有可能相同。
解决方法：在数据项中增加一个id项，以id作为节点的唯一标识

let dataInfo = [{
	id: 1,
    name: "浮游植物",
    category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
    symbolSize: 50,
    draggable: true,
    fixed: true,
    value: [0, 150]
}]
// 当以Id作为唯一标识时，dataLink也需要修改
// source target需要以Id来标记，并且必须是字符串的形式！！！！！！！
let dataLink = [{
    source: "1",
    value: "被吃",
    target: "2",
}]

两点之间如何绘制多条连线

给link数据的lineStyle.curveness设置不同的值即可

links: [{
	source: '节点2',
	target: '节点1',
	label: {
		show: true
	},
	lineStyle: {
		curveness: 0.2
	}
},{
	source: '节点2',
	target: '节点1',
	label: {
		show: true
	},
	lineStyle: {
		curveness: 0.4
	}
}, {
	source: '节点2',
	target: '节点1',
	label: {
		show: true
	},
	lineStyle: {
		curveness: 0.6
	}
}]

Echarts图随着浏览器窗口的变化而变化

在setOption(option)后添加代码window.addEventListener

function drawEcharts() {
	// ...
	var myChart= echarts.init(document.getElementById('drawBB'))
	let option = {
		// 你的option
	}
	myChart.setOption(option)
	window.addEventListener('resize',function(){
		myChart.resize();
	})
}