echarts 树状图 关闭节点的默认点击事件
时间: 2023-07-11 11:39:49 浏览: 53
要关闭echarts树状图节点的默认点击事件,可以使用echarts提供的option中的`series`属性下的`label`属性来自定义节点的标签显示和样式。具体操作是在`label`属性中设置`show`属性为`false`,如下所示:
```
{
series: [{
type: 'tree',
...
label: {
show: false // 关闭节点的默认点击事件
},
...
}]
}
```
这种方式可以实现不显示节点标签的效果,从而达到关闭节点默认点击事件的目的。
相关问题
echarts 树状图 关闭节点的默认点击事件展开缩放
您可以通过设置 `nodeClick:false` 来关闭树状图节点的默认点击事件展开缩放。具体实现方法如下:
```javascript
option = {
series: [
{
type: 'tree',
data: [{
name: '节点1',
children: [
{
name: '节点2'
},
{
name: '节点3'
}
]
}],
nodeClick: false, // 关闭节点的默认点击事件展开缩放
// 其他配置...
}
]
};
```
当然,您也可以通过 `focusNodeAdjacency` 属性来控制节点的点击行为。具体实现方法如下:
```javascript
option = {
series: [
{
type: 'tree',
data: [{
name: '节点1',
children: [
{
name: '节点2'
},
{
name: '节点3'
}
]
}],
focusNodeAdjacency: false, // 关闭节点的默认点击事件展开缩放
// 其他配置...
}
]
};
```
希望能对您有所帮助!
echarts 树状图关闭关闭节点默认事件
在 ECharts 中,可以通过配置 `series` 中的 `emphasis` 和 `blur` 来控制节点的高亮和失焦状态。在这两个状态下,可以通过设置 `itemStyle` 的 `opacity` 和 `borderColor` 来控制节点的显示样式。如果要完全关闭节点的默认事件(例如单击节点时不触发展开/收起子节点的行为),可以在 `emphasis` 和 `blur` 中都设置 `silent: true`,并在 `click` 事件中手动控制节点的展开/收起状态。
以下是示例代码:
```js
option = {
series: [{
type: 'tree',
data: [...], // 树状图的数据
emphasis: {
// 高亮状态
itemStyle: {
opacity: 0.8,
borderColor: 'red'
},
silent: true // 关闭默认事件
},
blur: {
// 失焦状态
itemStyle: {
opacity: 1,
borderColor: 'gray'
},
silent: true // 关闭默认事件
},
label: {
show: true
},
leaves: {
label: {
show: true
}
},
expandAndCollapse: true, // 允许展开/收起节点
animationDuration: 550,
animationDurationUpdate: 750
}],
// 添加点击事件
// 在点击事件中手动控制节点的展开/收起状态
// 并阻止事件冒泡以关闭默认事件
series: [{
type: 'tree',
data: [...],
// ...
emphasis: {
// ...
focus: 'descendant',
// 添加点击事件
// 在点击事件中手动控制节点的展开/收起状态
// 并阻止事件冒泡以关闭默认事件
onclick: function(params) {
params.event.stopPropagation();
var node = params.data;
node.expanded = !node.expanded;
myChart.setOption({
series: [{
data: [node]
}]
});
}
},
// ...
}]
};
```
在上面的代码中,我们在 `emphasis` 中设置了 `silent: true` 关闭默认事件,并在 `onclick` 事件中手动控制节点的展开/收起状态。在点击事件中,我们首先调用 `params.event.stopPropagation()` 阻止事件冒泡,然后获取到当前节点 `node`,将其 `expanded` 属性取反,最后通过 `myChart.setOption()` 方法更新树状图的数据。这样,就可以实现完全关闭节点默认事件的效果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)