echarts图表自适应，容器宽度设置为百分比，但是图表显示不全，缩到一起
2024-08-30 00:09:03
<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
最新文章
- .NET Core Windows环境安装与体验
- python学习道路(day3note)(元组，字典 ，集合，字符编码，文件操作)
- ubuntu 安装mongodb
- 【Java每日一题】20161123
- android firmware 利用UDP socket发送Magic Packet--c语言版本
- js 当前日期增加自然月
- BZOJ3799 : 字符串重组
- [Js]评分星星
- linux 命令 之chomd
- ORM 是一种讨厌的反模式
- 负载均衡server load balancer
- shell启动时读取的配置文件
- vm选项大全
- Android利用文本分割拼接开发一个花藤文字生成
- CSS Sprites(基本写法，怎样使用)
- 3 Eclipse 查看不了源码
- python设计模式第二十天【模版方法模式】
- 编译器处理警告、错误 #pragma GCC diagnostic ignored "-Wunused"
- cocos2dx 粒子系统
- SQL查询有两门以上不及格的学生及查询出全部及格的学生