echarts树形图点击节点居中
时间: 2023-07-11 16:44:56 浏览: 103
echarts,tree 图,节点收缩,option 配置即可
5星 · 资源好评率100%
要实现点击树形图节点后居中显示该节点,可以使用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 });
```
阅读全文