• echarts树形图,分支过多,页面放不下,高度自适应方法


    直接代码吧!

    html

        <el-row :gutter='20'>

            <el-col :span='24'>

                 <el-card>

                       <div id = 'chart-tree' class='tree'>

                  </el-card>

              </el-col>

         </el-row >

    <script>

        export default{

                data(){

                          return{

                                  chartData:{

                                                  'name':'dlare',

                                                    'children':[] 

                                                        },

                                      chartTree:null

                                       }

                   },

                   methods:{

                                 initChartTree(){

                                               this.chartTree = this.$echarts.init(document.getElementById('chart-tree'))

                                                let option = {}   //option里面的配置直接复制echarts树状图里面的即可

                                                 this.chartTree.setOption(option)

                                                 var temp = this.charrtTree

                                                  var container = document.getElementById('chart-tree')

                                                   this.chartTree.on('click',function(params){

                                                              if(params.componentType === 'series'){

                                                                    if(!params.value){

                                                                         var elesArr = Array.from(new Set(temp._chartsVIews[0]._data._graphicEls));

                                                                          var height = 300;

                                                                          var currentHeight = 10 * (elesArr.length - 1) || 10;

                                                                           var newHeight = Math.max(currentHeight,height);

                                                                            cotainer.style.height = newHeight + 'px';

                                                                            temp.resize()

                                                                       }

                                                                    }

                                                         })

                                               },

                                            mounted(){

                                                  this.initChartTree();

                                                }

                                  }

    </srcipt>

    <style>

     .tree{

     height:300px;

    }

    </style>

    以上为我手写代码,可能会多一个少一个括号复制粘贴注意一下。

    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    Redis数据类型之字符串String
    Redis数据类型之列表List
    hdu 2066 一个人的旅行
    CDOJ 1221 Ancient Go
    如何避免javascript中的冲突
    利用锚点制作简单索引效果
    函数中的私有变量和特权方法
    Linux中常用命令cat
    java -jar参数运行方式设置classpath
    Linux中的数据重定向
  • 原文地址:https://www.cnblogs.com/wasbg/p/11278539.html
Copyright © 2020-2023  润新知