将百分比宽高其转化为px单位,供echarts使用

2020-11-20  本文已影响0人  MC桥默

前言

使用echarts时,我们会先写好放置echarts图表的div,然后再获取到此div,将写好的echarts放到里面,但是有时候div的宽度和高度为自适应的百分比,但是echarts好像没有加载出来,也没有报错。仔细审查元素,发现echarts已经在文档流里面了,就是其宽度或高度都为0。所以在这种情况下,我们有必要把百分数的宽高转化为px单位的宽高,然后再初始化echarts。

如何将div百分比宽高转为px

window.onload=function () {
    var div1=document.getElementById("devEnergyConsumeChart");
    var div2=document.getElementById("devEnergyConsume");
    // 获取元素的宽高,将百分比转化为px;赋值给div2
    div2.style.width=div1.offsetWidth+'px';
    div2.style.height=div1.offsetHeight+'px';
 }

注意:只写这dom事件是不行的,因为要等div百分比宽高加载好,才能知道对应的px值,所以代码都要写到onload事件里面,然后再初始化echarts.

上一篇 下一篇

猜你喜欢

热点阅读