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

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

需要强行设置宽高px

<div id="chartContainer" style="height:450px;width: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)) 将width: 100%;转为100,所以计算出的图表宽度为100px

echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起的更多相关文章

  1. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  2. div设置滚动条内容任然显示不全

    <div style="overflow:scroll;height:100%"></div> 注意:高度需设置为100%,不然内容显示不全

  3. echarts在tab切换时容器宽度设置为100%,只展示100px

    在 mychart.setOption(option); 后面加上 mychart.resize(); 即可

  4. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  5. 问题2:input、textarea、submit 宽度设置为100%,但显示宽度不一致

    <style type="text/css"> body{ padding: 10px; } input,textarea{ width: 100%; } </s ...

  6. echarts 视图自适应问题

    最近在项目中用到了echarts,在处理视图自适应问题上记录一下:同时比较一下和highcharts的区别: 在echarts中有一个resize的函数,可以直接在监听窗口变化时重新渲染即可: //在 ...

  7. vue中 eCharts 自适应容器

    在 vue 脚手架开发中,echarts图表自适应容器的方法: 父组件: <template> <div class="statistics_wrap"> ...

  8. eCharts 多个图表自适应窗口大小

    单个图表自适应页面窗口只需要在创建图表节点后面添加一句代码就可以了: window.onresize = myChart.resize; 多图表要自适应页面,创建图表节点后面添加事件,并在事件函数里面 ...

  9. div宽度设置无效问题解决

    问题描述: 要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px. 解决办法: 方法1/给div加入样式:f ...

随机推荐

  1. glog 与 zlog

    1.linux 源码调用 2.log 3级 info error debug 3.调用便利性 4.配置文件 动态加载 5.输出 log 文件 (大小 时间) 6大批量写入 (100条一次写入) 7设置 ...

  2. poj 3744 矩阵快速幂+概率dp

    题目大意: 输入n,代表一位童子兵要穿过一条路,路上有些地方放着n个地雷(1<=n<=10).再输入p,代表这位童子兵非常好玩,走路一蹦一跳的.每次他在 i 位置有 p 的概率走一步到 i ...

  3. centos7-关闭 rpcbind 服务

    1.关闭 rpcbind 服务 sudo systemctl disable rpcbind 2.关闭开机自启动 sudo  systemctl disable rpcbind 3.立即执行关闭 sy ...

  4. 【leetcode】962. Maximum Width Ramp

    题目如下: Given an array A of integers, a ramp is a tuple (i, j) for which i < j and A[i] <= A[j]. ...

  5. HIVE常用函数(1)聚合函数和序列函数

    SUM--sum(汇总字段) over (partition by 分组字段 order by 排序字段) 如果不指定ROWS BETWEEN,默认为从起点到当前行;如果不指定ORDER BY,则将分 ...

  6. Python 爬取各大代理IP网站(元类封装)

    import requests from pyquery import PyQuery as pq base_headers = { 'User-Agent': 'Mozilla/5.0 (Windo ...

  7. NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条

    半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...

  8. C语言新手写扫雷攻略2

    接下来是游戏的功能设计,要有扫雷的基本功能,左键点击雷区,右键红旗标记,并且可以统计雷数,可以重新开始,以下是游戏的功能初始 void Game(void) { while (1) { if (FLA ...

  9. php开发面试题---Mysql常用命令行大全

    php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...

  10. java 原生 HttpClient

    package org.rx.socks.http; import com.google.common.base.Strings; import lombok.SneakyThrows; import ...