Vue学习-echarts图表高度随父容器高度动态变更

前言

后管平台首页展示数据图表，想实现不同分辨率，图表高度动态调整。下面展示实现方式以及碰到的问题。

---

一、实现方式

1.图表初始化时调用【根据父容器高度动态更改子容器高度方法+echarts.resize()】已便不同分辨率浏览器下初次加载时图表高度未动态变更。
2.通过【window.addEventListener(["resize"],()=>{})】 监听页面分辨率变化同时调用【根据父容器高度动态更改子容器高度方法+echarts.resize()】实现图表适应。

<template>
  <div class="index_div" :style="{height:maxHeight}">
    <div class="left-top">
        <div class="left-left-top">
          <div id="releaseGoodsType" style="height:100px"></div>
        </div>  
    </div>
  </div>
</template>

<script>

//引入echarts
import * as echarts from "echarts"

import util from "@/util"

export default {

  data(){
    return{
      maxHeight:0,
      releaseGoodsTypeEchart:"",
    }
  },

  methods: {

    //查询货源类型占比圆饼图
    initReleaseGoodsType(){

      //echarts初始化
      this.releaseGoodsTypeEchart = echarts.init(document.getElementById("releaseGoodsType"));

      let option = {
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: 'xxxx占比',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      }
      this.releaseGoodsTypeEchart.setOption(option);
	  //根据父级高度设置子级高度(动态修改高度)
      util.setEchartsHeight('left-left-top', 'releaseGoodsType',0)
      this.releaseGoodsTypeEchart.resize();
    }

  },

  mounted(){
    this.maxHeight = Number(document.documentElement.clientHeight - 300) + "px";

    this.initReleaseGoodsType();
    //监听高度变化
    window.addEventListener(["resize"],()=>{
      console.log(11)
      util.setEchartsHeight('left-left-top', 'releaseGoodsType',0)
      this.releaseGoodsTypeEchart.resize();
    });
  }

}
</script>

<style>
  .index_div{
    display: flex;
    width: 100%;
  }

  .left-top{
    flex: 1;
    height: 100%;
    border: 1px solid red;
    margin: 0px 10px;
    display: flex;
  }

  .left-left-top{
    flex: 1;
    height: 49%;
  }
</style>


//根据父容器高度动态更改子容器高度
util.setEchartsHeight = function (className,childClassName,num){
  //父级高度
  let fatherHeight = document.getElementsByClassName(className)[0].offsetHeight;
  //计算echarts高度
  let echartHeight = fatherHeight - num
  //echarts高度重新赋值
  document.getElementById(childClassName).style.height = echartHeight + "px";
}

---

二、问题

以上代码存在一个问题:图表首次加载展现不了。原因是因为获取父级容器高度为0，导致图表容器高度计算也为0.但我已经设置了图表容器的父级以及祖父级的高度！，这是为什么呢？继续向下看。

 //根据父级高度设置子级高度(动态修改高度)
 util.setEchartsHeight('left-left-top', 'releaseGoodsType',0)
  this.releaseGoodsTypeEchart.resize();

---

三、解决方式

将this.maxHeight = Number(document.documentElement.clientHeight - 300) + "px"; 替换成 document.getElementById('index_div').style.height = Number(document.documentElement.clientHeight - 300) + "px";

问题点修改前:

mounted(){
    this.maxHeight = Number(document.documentElement.clientHeight - 300) + "px";
    this.initReleaseGoodsType();
    
    //监听高度变化
    window.addEventListener(["resize"],()=>{
      util.setEchartsHeight('left-left-top', 'releaseGoodsType')
      this.releaseGoodsTypeEchart.resize();
    });
  }

问题点修改后：

mounted(){
    document.getElementById('index_div').style.height = Number(document.documentElement.clientHeight - 300) + "px";
    this.initReleaseGoodsType();
    
    //监听高度变化
    window.addEventListener(["resize"],()=>{
      util.setEchartsHeight('left-left-top', 'releaseGoodsType')
      this.releaseGoodsTypeEchart.resize();
    });
  }

---

总结

此总结纯属为个人分析，如错误请留言。有可能是父级和祖父级还没有渲染好，图表容器就去取高度了，导致没取到，所以我觉得:style是对已渲染的dom进行修改的，存在渲染加载顺序。document.getElementById('xxx').style.height是直接操作的dom所以不存在渲染加载顺序。