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