Echarts实现点击节点显示
时间: 2023-12-10 21:42:18 浏览: 146
E可以通过设置节点的`on click`事件来实现点击节点后显示相关信息。具体步骤如下:
1. 定义Echarts图表的配置项和数据,包括节点和边的信息。
2. 在节点上设置`on click`事件,当点击节点时触发该事件。
3. 在事件处理程序中获取当前节点的信息,并将信息展示在页面上或弹出窗口中。
以下是一个简单的示例代码:
```
// 定义Echarts图表的配置项和数据
var option = {
series: [{
type: 'graph',
data: [
{name: '节点1', x: 100, y: 100},
{name: '节点2', x: 200, y: 200},
{name: '节点3', x: 300, y: 300}
],
links: [
{source: '节点1', target: '节点2'},
{source: '节点2', target: '节点3'}
],
// 在节点上设置on click事件
label: {
show: true,
position: 'inside',
formatter: '{b}'
},
emphasis: {
label: {
show: true
}
},
roam: true,
focusNodeAdjacency: true,
itemStyle: {
borderWidth: 1
}
}]
};
// 获取Echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 渲染图表
myChart.setOption(option);
// 给节点设置on click事件
myChart.on('click', function(params) {
if (params.dataType === 'node') {
// 获取当前节点的信息
var node = params.data;
// 在页面上或弹出窗口中展示节点信息
alert('节点名称:' + node.name + '\n' + '节点坐标:(' + node.x + ', ' + node.y + ')');
}
});
```
在上面的代码中,我们定义了一个包含3个节点和2条边的图表,并在节点上设置了`on click`事件。当点击节点时,会触发`click`事件处理程序,我们在处理程序中获取当前节点的信息并展示出来。你可以根据自己的需求修改代码来实现不同的功能。
阅读全文