echart树图自适应高度

ECharts是一个流行的JavaScript数据可视化库，它提供了多种图表类型，包括树状图（Tree）。在创建树状图时，如果需要图表的高度能够自动适应数据内容，可以使用ECharts的`tree`组件的`height`属性配合`dataZoom`（缩放组件）来实现。

首先，在配置选项里设置`height`为动态值，如`auto`或`视窗高度减去一定的padding`，例如：

var option = {
  height: 'auto', // 或者 '视窗高度 - 50' 这样的计算值
  tree: {
    data: ...,
    ...
  },
  dataZoom: { // 使用数据缩放组件
    y: { start: 0, end: 1 } // 将y轴的范围设置为可视区域
  }
};

其次，通过监听窗口大小变化事件，动态更新`height`和`dataZoom`组件的高度。这通常需要用到ECharts提供的`resize`事件处理器：

echarts.getInstanceByDom(document.getElementById('main')).on('resize', function() {
  var chart = echarts.getInstanceByDom(this);
  chart.setOption({
    height: 'auto', // 适应新的窗口高度
    dataZoom: { y: { start: 0, end: 1 } } // 更新数据缩放的范围
  });
});

这样，当页面内容改变或浏览器窗口调整时，ECharts的树状图会自动调整其高度，以显示所有节点。