vue-echarts /div动态的计算高度
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-echarts /div动态的计算高度相关的知识,希望对你有一定的参考价值。
参考技术A DIV部分<chart
ref="taskChart"
:theme="charts.theme"
autoresize :options="charts.optionsu"
@click="zydwclick"
:style="width:charts.width,height:charts.height">
</chart>
<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"
:src="YZKH_URL" :height="ifram_height"
frameborder="0">
</iframe>
data部分
charts:
//div的高度
ifram_height:0,
//echarts的高度宽度
width:'100%',
height:"230px",
//自动设置chart的高度
methods:
RowResize()
let me =this;
const deviceHeight = document.documentElement.clientHeight
const chartHeight = (Number(deviceHeight) *0.82) /2//两个row
//计算echarts 的高度
me.charts.height = chartHeight +'px';
//计算div部分的高度
me.ifram_height = (Number(deviceHeight) *0.78) +'px'
,
在mountd里面调用
mounted()
let me =this;
me.RowResize();
//监视窗口发生变化再调用一次
window.onresize =function ()
me.RowResize();
获取DOM的高度宽度公式
DOM可视高度/DOM最长的高度=计算比例
计算 table高度
<Table border
@on-sort-change="onSortChange"
:columns="tableA.tableColumns"
:data="tableA.tableData"
:height="height"
ref="currentRowTable"
:percent="percent"
style="white-space: nowrap;word-break: keep-all"
></Table>
data()
return
height:100,
//自动设置列表的高度
RowResize()
let me =this;
const deviceHeight = document.documentElement.clientHeight
if (me.$refs.currentRowTable)
me.height = Number(deviceHeight) *0.65
,
let me =this
me.RowResize();
//监听窗口大小变化
window.onresize =function ()
me.RowResize();
以上是关于vue-echarts /div动态的计算高度的主要内容,如果未能解决你的问题,请参考以下文章