vue 之折线图挤压

最新推荐文章于 2023-11-03 08:30:22 发布

weixin_30896825

最新推荐文章于 2023-11-03 08:30:22 发布

阅读量204

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/phpli/p/10855461.html

当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();