vue项目中echart自适应高度--根据容器大小(宽度同理)
程序员文章站
2022-03-08 14:06:51
...
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
上一篇: css 设置最小高度,当容器内部超出容器最小高度时自适应
下一篇: Hudi(二)