Apache ECharts左右树图：如何动态计算容器宽高及是否支持缩放？

一、动态计算容器尺寸适配节点数量 #

ECharts树图渲染完成后可获取节点布局信息，以此动态调整容器宽高，避免节点重叠或空白过多。核心逻辑是监听图表渲染完成事件，计算所有节点的最大坐标值，加上边距后设置容器尺寸，具体实现如下：

1. 设置容器初始样式：给容器配置最小宽高，避免数据极少时完全空白：

<div id="treeChart" style="min-width: 400px; min-height: 300px;"></div>

2. 初始化图表并动态调整容器：在图表渲染完成后，遍历节点布局数据计算所需宽高：

var chart = echarts.init(document.getElementById('treeChart'));
// 从PHP后端获取树节点数据
var treeData = <?php echo json_encode($yourTreeData); ?>;

var option = {
    series: [{
        type: 'tree',
        layout: 'orthogonal',
        orient: 'LR', // 左右布局
        data: treeData,
        symbolSize: 20, // 可根据节点数量调整符号大小，降低重叠概率
        label: {
            fontSize: 12
        }
    }]
};

chart.setOption(option);

// 监听渲染完成事件，动态调整容器尺寸
chart.on('finished', function() {
    var seriesModel = chart.getModel().getSeries()[0];
    // 获取所有节点的布局坐标信息
    var nodeLayouts = seriesModel.data.map(node => node.getLayoutInfo());
    // 计算最大X、Y坐标值
    var maxX = Math.max(...nodeLayouts.map(item => item.x));
    var maxY = Math.max(...nodeLayouts.map(item => item.y));
    // 加上边距（可根据需求调整数值）
    var targetWidth = maxX + 50;
    var targetHeight = maxY + 50;
    // 确保容器不小于初始最小尺寸
    var chartDom = document.getElementById('treeChart');
    chartDom.style.width = Math.max(targetWidth, 400) + 'px';
    chartDom.style.height = Math.max(targetHeight, 300) + 'px';
    // 重新调整图表适配新容器
    chart.resize();
});

若PHP后端动态更新数据，重新调用chart.setOption(option)后，finished事件会再次触发，自动重新计算容器尺寸。

二、树图的缩放功能支持 #

ECharts树图原生支持缩放和拖拽功能，只需在series配置中开启roam属性：

series: [{
    type: 'tree',
    layout: 'orthogonal',
    orient: 'LR',
    roam: true, // 同时开启鼠标滚轮缩放和拖拽功能
    // 可选单独指定功能：仅缩放用roam: 'scale'，仅拖拽用roam: 'move'
    data: treeData,
    // 其他配置项
}]

开启后，用户可通过鼠标滚轮缩放图表，拖拽调整可视区域，即使节点数量较多也能灵活查看细节。

内容的提问来源于stack exchange，提问作者BestSolutionsfinder