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

roury

已于 2022-03-14 16:14:52 修改

阅读量7.5k

点赞数 3

分类专栏： vue echarts 文章标签： vue

于 2020-11-30 10:45:02 首次发布

本文链接：https://blog.csdn.net/roury/article/details/110375992

版权

本文介绍了在Vue项目中如何使ECharts图表实现高度和宽度自适应，重点在于根据容器大小调整。关键代码包括HTML结构和初始化图表时的设置，确保图表随着内容区域的变化而自动调整大小。

摘要由CSDN通过智能技术生成

vue项目中echart自适应高度–根据容器大小（宽度直接设置100%）

关键代码：

window.onresize = () => {
   
	this.echartTest.resize()
}

以及

 //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
  resizeDom() {
   
    var backPersonDom=document.getElementById('backPerson');
    const boxHeight = document.getElementById("content").clientHeight
    backPersonDom.style.height = (boxHeight/2-65)+'px';
  }