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 ...
随机推荐
- 进程之间的通信AIDL
远程端: package cn.itcast.aidl; //AIDL //首先建立AIDL文件,有点和接口类似,建立好AIDL文件后, //会在gen文件夹下自动生成用于远程通信的类 //文件的后缀 ...
- java爬取读者文摘杂志
java爬虫入门实战练习 此代码仅用于学习研究 此次练习选择了读者文摘杂志网站进行文章爬取 练习中用到的都只是一些简单的方法,不过过程中复习了输入流输出流的使用以及文件的创建写入等知识,对自己还是有所 ...
- testparm - 检查smb.conf配置文件的内部正确性
总览 testparm [-s] [-h] [-L servername] [configfilename] [hostname hostIP] 描述 此程序是samba套件的一部分. testpar ...
- 企业级NginxWeb服务优化实战(上)
企业级NginxWeb服务优化实战(上) 1. Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息 一般来说,软件的漏洞都和版本有关,这个很像汽车的缺陷,同一批次的要有问题就都有问题 ...
- Linux账号管理与ALC权限设定(二) 批量增加用户脚本
接上篇.鸟哥提出了一个问题.就是 如果myuser1用户是这个项目的助理,他只能查看该目录下的内容,而无法修改删除.那该如何操作呢? 首先,不能将该用户加入projecta这个群组,否则他也可以修改删 ...
- jsp EL运算符
算术运算符 算术运算符 说明 示例 结果 + 加 ${1 + 1} 2 - 减 ${1 - 1} 0 * 乘 ${1 * 2} 2 /或div 除 ${3 / 2} 1.5 %或mod 取余 ${3 ...
- DELPHI常用类型及定义单元
Controls Application (the variable not a type) Forms Beep SysUtils or Windows (different functions) ...
- js和php语法区别
参考 : https://www.wangjingxian.cn/php/51.html
- /etc/fstab修改及mkfs(e2label)相关应用与疑问
http://blog.chinaunix.net/uid-23392298-id-62318.html 我们将以问题开始说明: 案例: 由于n年前的误操作,导致系统启动的时候,提示如下错误:Coul ...
- mac 堡垒机传文件
安装zssh brew install zssh 上传文件 zssh登陆上跳板机 在跳板机上ssh到相应服务器 在服务器上cd至相应要放上传文件的目录 rz -bye //在远程服务器的相应目录上运行 ...