zoukankan      html  css  js  c++  java
  • 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="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();
    

      

  • 相关阅读:
    linux脚本mysql服务与keepalived服务高可用脚本
    linux脚本启动服务脚本
    linux脚本数据库备份脚本
    linux脚本清理日志文件脚本
    最大数字
    求阶乘
    素数
    水仙花数
    js基础1
    css常用属性2
  • 原文地址:https://www.cnblogs.com/phpli/p/10855461.html
Copyright © 2011-2022 走看看