我使用图表的基础https://echarts.apache.org/examples/en/editor.html?c=graph 对于我的版本，我需要能够在顶部选择一个类别，然后我只想显示该类别中附有链接的节点。我需要这个，因为我的一些节点没有基于我选择的类别的链接。
<!--
Knowledge Map v2
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var ROOT_PATH = '';
var option;
myChart.showLoading();
$.getJSON(ROOT_PATH + '/Graph_Data/KnowledgeMapData.json', function (graph) {
myChart.hideLoading();
option = {
tooltip: {},
legend: [
{
data: graph.categories.map(function (a) {
return a.name;
})
}
],
series: [
{
name: 'Aranea Knowledge Map',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: graph.categories,
roam: true,
label: {
show: true,
position: 'right',
formatter: '{b}'
},
labelLayout: {
hideOverlap: true
},
scaleLimit: {
min: 0.4,
max: 2
},
lineStyle: {
color: 'source',
curveness: 0.1
}
}
]
};
myChart.setOption(option);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
您可以使用 legendselectchanged 事件根据选择修改图表的内容。这是您指定的示例。该效果只能在类别“H”中的一个孤立节点上看到。
示例：
myChart.showLoading();
$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
myChart.hideLoading();
graph.nodes.forEach(function (node) {
node.label = {
show: node.symbolSize > 30
};
});
graph.links.splice(96, 1)
option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [
{
selector: [{type: 'all', title: 'All'}],
data: graph.categories.map(function (a) {
return a.name;
})
}
],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: graph.categories,
roam: true,
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
}
}
]
};
myChart.setOption(option);
myChart.on('legendselectchanged', function(params) {
const nodesWithLink = new Set();
for (const link of graph.links) {
nodesWithLink.add(link.source);
nodesWithLink.add(link.target);
}
for (const node of graph.nodes) {
if (!nodesWithLink.has(node.id)) {
node.itemStyle = {color: 'transparent'};
} else {
node.itemStyle = undefined;
}
}
const legendSelected = {A: false, B: false, C: false, D: false, E: false, F: false, G: false, H: false, I: false};
legendSelected[params.name] = true;
myChart.setOption({series: [{name: 'Les Miserables', data: graph.nodes}], legend: {selected: legendSelected}});
});
myChart.on('legendselectall', function(params) {
for (const node of graph.nodes) {
node.itemStyle = undefined;
}
myChart.setOption({series: [{name: 'Les Miserables', data: graph.nodes}]});
});
});