Vue3使用echarts tree高度自适应支持滚动查看功能

<template>
  <div style="overflow: auto; height: calc(80vh)">
      <div id="treechart" style="height: 800px"></div>
  </div>
</template>

<script setup lang="ts">
import * as Echarts from "echarts";
import { ref,onMounted } from "vue";
onMounted(()=>{
    let chartDom = Echarts.init(document.getElementById("treechart"));
    let option={
        ....
    };
    chartDom.setOption(option);
    chartDom.on("click"，function(event){
        let treeDom = document.getElementById("treechart");//猎取元艳
        if(event.componentType === "series"){
            let nodeList = Array.from(new Set(chartDom._chartsViews[0]._data._graphicEls));//计较节点数目
            let height = 800;//默许下度
            let currentHeight = 30*(nodeList.length-1)||100;//动静下度
            let newHeight = Math.max(currentHeight,height);
            treeDom.style.height= newHeight+"px";
            chartDom.resize();
        }
    });
})
</script>