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

这篇具有很好参考价值的文章主要介绍了echarts tree自适应高度调整,加滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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);
      }

    }

至于滚动条文章来源地址https://www.toymoban.com/news/detail-803204.html

<div style="overflow:auto; height: calc(80vh); ">
      <div class="chart" id="treeChart">Tree</div>
</div>

到了这里,关于echarts tree自适应高度调整,加滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包