zoukankan      html  css  js  c++  java
  • echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起

    <div  id="chartContainer" style="height:100%;100%;"></div>

    chartContainer用来存放Echart图,设置宽高100%时出现Echart图没有铺满div

     需要强行设置宽高px

    <div id="chartContainer" style="height:450px;1030px;"></div>

    echarts的源码中计算宽度时:

    Painter.prototype._getWidth = function() {
    var root = this.root;
    var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
    return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

    原因在于echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将 100%;转为100,所以计算出的图表宽度为100px

  • 相关阅读:
    判断微信浏览器
    文章迁移
    ECharts使用—折线图动态加载
    vue-cli入门
    gulp使用详解
    gulp使用入门
    Chrome扩展插件流程
    div界面元素生成图片
    xss攻击与防御
    bootstrap-table使用详解
  • 原文地址:https://www.cnblogs.com/nje19951205/p/12029739.html
Copyright © 2011-2022 走看看