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 ...
随机推荐
- Vue_子级组件调用主组件函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 案例:forEach和some区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Cloudflare-为自己的网站&博客保驾护航
官网: https://www.cloudflare.com/zh-cn/ Cloudflare是什么? 优化功能,提升网站性能,提供SSL服务,提供安全防护,托管服务:为企业,非营利组织,博客等提供 ...
- shell 符号的定义(一)
在shell中,在判断数值大小除了可以用”(( ))”的形式外,还可以使用”[ ]”.但是就不能使用>, < , = 这样的符号了,要使用 -lt (小于),-gt (大于),-le (小 ...
- nodejs 模板引擎jade的简单使用(2)
1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...
- Shiro学习(8)拦截器机制
8.1 拦截器介绍 Shiro使用了与Servlet一样的Filter接口进行扩展:所以如果对Filter不熟悉可以参考<Servlet3.1规范>http://www.iteye.com ...
- xStream.jar踩坑指南
前言 第一次接触Xstream,是在做一个socket通信的项目,由于是二次重新开发,所以有部分代码沿用了原来的代码(改造前用的webservice),其中xml字符串转换为对象,以及对象转换为xml ...
- hive中分隔符‘\001’到底是什么鬼
答:hive中的默认的是'\001'是一种特由的分隔符 使用的是ascii编码的值,键盘是打不出来的.
- STL lower_bound upper_bound 用法
1.lower_bound(begin,end,x) 返回第一个>=x的位置,找不到return .end() 2.upper_bound (begin,end,x) 返回第一个>x的位置 ...
- 可持化永久树 的 STL ( rope )
rope 的基本操作 #include <ext/rope> using namespace __gnu_cxx; ]; rope<int> x; rope<int> ...