vue 之 折线图挤压

当tab标签栏变动时,echarts图会发生挤,这种情况,发现是html容器的width=100%这个设置,变成了width=100px。

解决方式:

1.设置一个最小宽度,获取width的值,当这个值小于最小宽度时,赋值给它。

2.使用window.innerWidth获取值,在tab未激活时也可以获取得到页宽。

document.getElementById("LineCharts").style.width=(window.innerWidth-60)+'px';

 

//html
<div id="LineCharts" style="width:100%;height:400px"></div>


//js
let pieCharts = document.getElementById("LineCharts");
        let chartsOffetWidth = document.getElementById("LineCharts").offsetWidth;
        if(chartsOffetWidth === 0 ){
          let parentWidth = document.documentElement.clientWidth - 285;
          if(parentWidth < 1035){
            parentWidth = 1035;
          }
          pieCharts.style.width = parentWidth + 'px';
        }
        this.myLineCharts = echarts.init(pieCharts);
        this.myLineCharts.clear();

  

 

posted @ 2019-05-13 10:57  盛兮  阅读(916)  评论(0编辑  收藏  举报