echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起
<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图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起的更多相关文章
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- div设置滚动条内容任然显示不全
<div style="overflow:scroll;height:100%"></div> 注意:高度需设置为100%,不然内容显示不全
- echarts在tab切换时容器宽度设置为100%,只展示100px
在 mychart.setOption(option); 后面加上 mychart.resize(); 即可
- js获取宽度设置thickbox百分比
thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...
- 问题2:input、textarea、submit 宽度设置为100%,但显示宽度不一致
<style type="text/css"> body{ padding: 10px; } input,textarea{ width: 100%; } </s ...
- echarts 视图自适应问题
最近在项目中用到了echarts,在处理视图自适应问题上记录一下:同时比较一下和highcharts的区别: 在echarts中有一个resize的函数,可以直接在监听窗口变化时重新渲染即可: //在 ...
- vue中 eCharts 自适应容器
在 vue 脚手架开发中,echarts图表自适应容器的方法: 父组件: <template> <div class="statistics_wrap"> ...
- eCharts 多个图表自适应窗口大小
单个图表自适应页面窗口只需要在创建图表节点后面添加一句代码就可以了: window.onresize = myChart.resize; 多图表要自适应页面,创建图表节点后面添加事件,并在事件函数里面 ...
- div宽度设置无效问题解决
问题描述: 要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px. 解决办法: 方法1/给div加入样式:f ...
随机推荐
- Java面试宝典(1)Java基础部分
Java面试宝典 题目,日积月累,等到出去面试时,一切都水到渠成,面试时就自然会游刃有余了. 答题时,先答是什么,再答有什么作用和要注意什么(这部分最重要,展现自己的心得) 答案的段落分别,层次分明, ...
- SQLServer存储过程学习记录
简单来说,存储过程就是一条或者多条sql语句的集合,可视为批处理文件,但是其作用不仅限于批处理. 一.存储过程的概述 SQL Server中的存储过程是使用T_SQL编写的代码段.它的目的在于能够方便 ...
- 关于PCB的Mark点
关于PCB的Mark PCB板子做好后,需要贴装元器件,现在元器件的贴装都是通过机器来完成的(SMT).SMT中会用到mark点. 一.什么是Mark点 Mark点也叫基准点或者光学定位点,为贴装工艺 ...
- 让所有Excel数据格全部乘 某个数
1 首先设置单元格格式要是数字 2 然后在随便一个单元格写入你要乘的数字 3 粘贴的时候设置选择性粘贴,然后设置乘就OK
- 关于solarwinds的一些介绍
由于是给客户使用,作为运维人员自然是要安装测试一下的. solarwinds是一个付费的监控软件,部署起来很方便,加agent节点也很方便,除了监控主机,还可以监控网络流量,交换机等设备.由于并没有实 ...
- Spring事务管理-传播行为-隔离级别
事务是逻辑上的一组操作,这组操作要么全部成功,要么全部失败. 事务的特性:ACID 原子性:事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生 一致性:事务前后数据的完整性约束保持一致 ...
- Centos7命令行安装Tomcat以及配置防火墙开放端口
[转载]Centos 7 yum安装tomcat 命令: 系统环境CentOS Linux release 7.2.1511 (Core) 一.搭建准备:1.先到tomcat官网https://tom ...
- ruby中数组认识
a = 1...5这样赋值,a不是数组类型,1...5操作是一种枚举类型. a = ["1","2","3","4"], ...
- 安装beanstalkd - centos
安装: wget https://github.com/kr/beanstalkd/archive/v1.9.tar.gz beanstalkd_v1. beanstalkd_v1..tar.gz . ...
- CSS template
ylbtech-CSS3: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.cn ...