zoukankan      html  css  js  c++  java
  • 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>

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

    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    [转]拓扑排序
    [转]C++ string学习
    二叉树的前序遍历
    My Solution to Lowest Common Ancestor of a Binary Tree Part I(TopDown Approach)
    求二叉树节点总数
    二叉树的中序遍历
    轻松搞定面试中的二叉树题目
    VS2005 CrystalReport开发Web应用
    ASP.NET 2.0移动开发入门之使用模拟器
    [原创]Ajax UpLoadFile 多个大文件上传控件,已更新。
  • 原文地址:https://www.cnblogs.com/wasbg/p/11278539.html
Copyright © 2011-2022 走看看