echarts tree自适应高度调整,加滚动条

发布时间:2024年01月11日

vue中,


    onMounted(() => {
      try {

        let $echarts = inject("echarts");
        let myChart = $echarts.init(document.getElementById("treeChart"));
  
        let option = getoption(mydata)
        myChart.setOption(option);

        // myChart.on("click", treeNodeclick);
         
        myChart.on("click", function (param) {    
          console.log("param:",param)
          
          let container = document.getElementById("treeChart")
          //  自适应高度
          if (param.componentType === "series") {
              
                 let elesArr = Array.from(
                   new Set(myChart._chartsViews[0]._data._graphicEls)
                 );
                 let height = 1080;//默认高度 
                 let currentHeight = 35 * (elesArr.length - 1) || 100; //动态高度
                 let newHeight = Math.max(currentHeight, height);
                 container.style.height = newHeight + "px";
                 myChart.resize();
               
             } 
 
           }
                      
           );


      }

      catch (error) {
        console.error(error);
      }

    }

至于滚动条

<div style="overflow:auto; height: calc(80vh); ">
      <div class="chart" id="treeChart">Tree</div>
</div>
文章来源:https://blog.csdn.net/sunshinezhihuo/article/details/135524746
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。