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 ...
随机推荐
- springMVC框架入门案例
控制器: package cn.mepu.controller; import org.springframework.stereotype.Controller; import org.spring ...
- Node.js中的fs文件系统
fs.stat 检测是文件还是目录 fs.mkdir 创建目录 fs.writeFile 创建写入文件 fs.appendFile 追加文件 fs.readFile 读取文件 fs.readdir 读 ...
- DQN的第一次尝试 -- 软工结对编程第一次作业
DQN的第一次尝试 在本篇博客中将为大家形象地介绍一下我对DQN的理解,以及我和我的队友如何利用DQN进行黄金点游戏.最后我会总结一下基于我在游戏中看到的结果,得到的dqn使用的注意事项和这次游戏中我 ...
- 2.java中c#中statc 静态调用不同之处、c#的静态构造函数和java中的构造代码块、静态代码块
1.java和c#静态成员调用的不同之处 static 表示静态的,也就是共享资源,它是在类加载的时候就创建了 java中 可以通过实例来调用,也可以通过类名.成员名来调用,但是一般最好使用类名. ...
- Ansible自动化部署K8S集群
Ansible自动化部署K8S集群 1.1 Ansible介绍 Ansible是一种IT自动化工具.它可以配置系统,部署软件以及协调更高级的IT任务,例如持续部署,滚动更新.Ansible适用于管理企 ...
- The 'with' and 'as' Keywords
Programming is all about getting the computer to do the work. Is there a way to get Python to automa ...
- leetcode-164周赛-1266-访问所有点的最小时间
题目描述: 自己的解: class Solution: def minTimeToVisitAllPoints(self, points: List[List[int]]) -> int: re ...
- Shiro学习(13)RememberMe
Shiro提供了记住我(RememberMe)的功能,比如访问如淘宝等一些网站时,关闭了浏览器下次再打开时还是能记住你是谁,下次访问时无需再登录即可访问,基本流程如下: 1.首先在登录页面选中Reme ...
- APICloud框架——融云+UIChatTools实现即时通讯聊天
今天完成了公司app的聊天界面的收发消息功能,结合融云2和UIChatTools模块实现,只是实现了基本功能,好多细节还没有实现,废话不多说,上代码 输入框页面(win) 先引入所需模块 // 融云模 ...
- Ajax请求参数为文件类型
1.图片用get请求,回调函数中返回的数据就是流文件(至于是什么流文件还不清楚), 在回调函数中再使用post请求2.JS将文件像form表单一样提交到后台 : https://www.cnblo ...