echart 关系图 点击节点 持续高亮怎么设置 请给我一个完整的例子
时间: 2024-02-03 09:14:32 浏览: 23
以下是一个基本的 echarts 关系图,点击节点后会持续高亮的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts 关系图</title>
</head>
<body>
<div id="myChart" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
<script type="text/javascript">
var chartDom = document.getElementById('myChart');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} : {b}'
},
series: [
{
type: 'graph',
layout: 'force',
force: {
repulsion: 100,
edgeLength: 50
},
data: [
{
name: '节点1',
symbolSize: 50
},
{
name: '节点2',
symbolSize: 50
},
{
name: '节点3',
symbolSize: 50
}
],
links: [
{
source: '节点1',
target: '节点2'
},
{
source: '节点1',
target: '节点3'
}
]
}
]
};
myChart.setOption(option);
myChart.on('click', function (params) {
if (params.dataType === 'node') {
myChart.dispatchAction({
type: 'focusNodeAdjacency',
seriesIndex: 0,
dataIndex: params.dataIndex
});
}
});
</script>
</body>
</html>
```
在上面的代码中,我们通过 `myChart.on` 方法监听了 `click` 事件,判断当前点击的 `params.dataType` 是否为 `node`,如果是,则调用 `myChart.dispatchAction` 方法,并传入参数 `{type: 'focusNodeAdjacency', seriesIndex: 0, dataIndex: params.dataIndex}`,这样就可以使节点持续高亮了。
注意:在以上代码中,我们使用了 echarts v5.2.1,如果你使用的是其他版本,则可能需要修改一些配置。