echarts树形图点击节点居中
时间: 2023-07-11 22:44:56 浏览: 77
要实现点击树形图节点后居中显示该节点,可以使用echarts提供的`dispatchAction`方法实现。具体步骤如下:
1. 给树形图添加点击事件的监听器,获取点击的节点信息。
```javascript
myChart.on('click', function(params) {
var node = params.data; // 获取点击的节点信息
// TODO: 居中显示该节点
});
```
2. 使用`dispatchAction`方法触发居中显示该节点的操作。
```javascript
myChart.dispatchAction({
type: 'treeExpandAndCollapse',
nodeId: node.id, // 节点的唯一标识符
expand: true, // 展开或收缩节点
focus: true, // 居中显示节点
});
```
以上代码中,`type`属性值为`treeExpandAndCollapse`,表示展开或收缩树形图节点,并且居中显示指定的节点。`nodeId`属性为节点的唯一标识符,可以通过节点的`id`属性获取。`expand`属性表示是否展开或收缩该节点。`focus`属性表示是否居中显示该节点。
注意:要使用`dispatchAction`方法,需要在echarts初始化时设置`silent`属性为`false`,即:
```javascript
var myChart = echarts.init(document.getElementById('myChart'), null, { silent: false });
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)