echarts宽高设置为百分比 不起作用 读取为px

1.height与width不能传递为百分比 echarts会自动识别为px

2.要读取该元素的宽高 转化为像素传递过去  这就要求获取到元素的宽高

3.如果传递过去固定的宽高 那么就不能随浏览器尺寸变化而变化 所以要监听resize获取宽高

下面为完整代码


//父级页面 也就是数据源

          <div class="alarm_chart" id="alarm_chart">
             <Chart :option="alarmChartOption" :height="height" :width="width" />
          </div>


mounted(){
    
    this.getHeight()
    window.addEventListener('resize', this.getHeight)

  },


getHeight(){
        let chart = document.getElementById("alarm_chart")
        console.log(window.getComputedStyle(chart).width,'chart.style')
        this.height = (parseInt(window.getComputedStyle(chart).height)-50)+'px'
        this.width = window.getComputedStyle(chart).width
},



//子级页面

<div :id="Id" :class="className" :style="{height,width}" ref="myChart" />

这是第二种 之前settimeout 也可以 但是效果没这个好