vue项目中echart自适应高度--根据容器大小（宽度同理）

vue项目中echart自适应高度–根据容器大小（宽度同理）

HTML

<template>
  <el-row :gutter="32" id="content" style="height:90%">
    <div id="backPerson" :class="className" :style="{height:height ,width:width}" />
  </el-row>
</template>

JS:根据content的高度变化而变化

mounted() {
  // 页面加载设置高度自适应
  this.resizeDom()
  this.$nextTick(() => {
    this.initChart()
  });
},
methods: {
  //图表设置
  initChart() {
    var _this = this;
    var myChart4 = echarts.init(document.getElementById('backPerson') ,'macarons')
    //......
  }
  //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
  resizeDom() {
    var backPersonDom=document.getElementById('backPerson');
    const boxHeight = document.getElementById("content").clientHeight
    backPersonDom.style.height = (boxHeight/2-65)+'px';
  },
  
 }

参考链接：https://blog.csdn.net/weixin_40079913/article/details/92766118
更多：https://blog.csdn.net/LLDD2014425/article/details/86231174