Echarts 关系图初始化后获取指定节点位置
2021-05-25 本文已影响0人
豆屁屁
echarts 迎来来5x版本，很多细节都焕然一新，比之前要漂亮多了。
今天使用echarts 中的关系图，有这么个需求：
1、关系图表中数据是人物关系，支持搜索框检索，显示指定节点位置tooltip弹框， 这里就遇到一个问题，当图表加载完成以后怎么获取指定节点的位置？
Make A Pie
echarts 社区随便找个简单那的例子开始改。
2、关键语法:
let model = myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts;
来源：
请教：绘制完成后是否有api获取所有节点和节点的坐标 · Issue #5614 · apache/echarts (github.com)
3、完成代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#myCharts {
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div id="myCharts"></div>
<script src="./js/echarts-5.0.2.js"></script>
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('myCharts'));
var datas = [{
name: '人员1',
id: '1-1',
category: 1,
draggable: true,
}, {
name: '文献',
id: '3',
category: 3,
draggable: true
}, {
name: '机构',
id: '2',
category: 2,
draggable: true
},
{
name: '项目',
id: '0',
draggable: true
},
{
name: '人员',
id: '1',
category: 1,
draggable: true,
}
];
var lines = [{
source: '1',
target: '1-1',
value: ''
}, {
source: '0',
target: '1',
value: ''
},
{
source: '0',
target: '2',
value: ''
},
{
source: '0',
target: '3',
value: ''
}
];
var option = {
title: {
text: ''
},
color: ["#BB8FCE", "#0099FF", "#5DADE2", ],
tooltip: {},
animationDurationUpdate: 1500,
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
series: [{
type: 'graph',
layout: 'force', //采用力引导布局
symbolSize: 45,
legendHoverLink: true, //启用图例 hover 时的联动高亮。
focusNodeAdjacency: false, //在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
roam: true,
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
edgeSymbolSize: [4, 50],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
categories: ['机构', '文献', '人员'],
data: datas,
links: lines,
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0
}
}
}]
};
myChart.setOption(option);
let model = myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts;
console.log('model',model);
</script>
</body>
</html>
image.png
如果是vue中，在获取完坐标之后如果要对数据进行处理，最好使用:
[dom].getOption().series[0].data
这样获取echarts 实例数据源，和坐标数据对比，
这样就可以在关系图加载完成之后，获取指定节点的坐标位置了。
