echarts踩坑---容器高度自适应
在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题。
具体解决办法如下:
<div id="myChart1" :style="{width:'650px'}" class="chart-css" ref="myEchart1"></div>
let myChart = this.$echarts.init(document.getElementById("myChart1"));
this.autoHeight = this.counts * 55 + 50; // counst.length为柱状图的条数,即数据长度。
myChart.getDom().style.height = this.autoHeight + "px";
myChart.resize();
通过以上代码即可解决echarts里面高度自适应问题。
echarts踩坑---容器高度自适应的更多相关文章
- 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化
问题现象 使用ECharts树图,在数据维度大,节点过多时,所看到的内容会重叠交错,无法查看. 原因 在给定ECharts树图容器尺寸后,无论数据多么庞大或者稀少,数据始终会尝试在给定容器内撑满.全部 ...
- echarts踩坑总结
1,有关echarts引用的相关报错直接写这句 import * as echarts from 'echarts' 2,折线图 chartsObj = { tooltip: { trigger: ...
- echarts 踩坑 : id必须不同
我们可能用react前端框架开发项目. 也就是组件化开发. 一个页面里可能有很多组件. 而echarts是寻找特定ID的DOM去渲染的. 也就是说,如果整个页面.包括所有页面组件,有id相同的DOM, ...
- echarts 踩坑 : 为什么效果出不来?看看有没有正确引入
今天我要给 echarts 组件加个 dataZoom 功能,结果发现没有效果. 后来发现是引入 echarts 模块的问题. 如果是按需引入的话,必须引入相应的功能模块才能使用相应的功能. 举例: ...
- echarts 踩坑 : 为什么触摸柱状图的时后柱子不见了?原来是color的锅!
今天发现一个奇怪的问题. 当我的鼠标触摸柱状图的时候,柱状图就消失了. 后来发现是颜色的设置有问题. color: ['rgba(68,238,224)', 'rgba(17,215,255)', ' ...
- flex自适应高度内容高度超出容器高度自动出现滚动条的问题
在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...
- 里面的div怎么撑开外面的div,让高度自适应
关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...
- 里面的div怎么撑开外面的div让高度自适应
参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...
随机推荐
- Linux扩展根目录下的空间
自己通过root创建了一个新用户,然而当我使用这个新用户时发现,/home/my中的空间只有几十M,完全不能满足我的使用,所以通过下面的方法扩展根下的空间. 我的本次操作,参考于 http://www ...
- PRINCE2是什么意思?
PRINCE2是一种长期以来公认的项目管理方法,在英国公共部门广泛应用,在私营企业界也发展成为事实上的应用方法. PRINCE2开发于1989年,是一种结构性的项目管理方法,其所有者OGC(英国商务部 ...
- 使用拦截器拦截html参数
公司最新需求:根据传递的参数进行业务判断,如果符合条件则继续后面的业务逻辑,否则跳转到指定的错误页面.有些是请求的controller 使用了spring aop的方式进行验证:但是有些是html页 ...
- Java web相关内容
我们即将学习Java web 这是通过查阅资料找到的和Java web 相关的内容. 一:Java web的含义 JavaWeb,是用Java技术来解决相关web互联网领域的技术总和.web包括:we ...
- C# 托管非托管资源释放
1.C#几乎所有对象都为托管对象,不同点是有的对象封装了非托管资源. 2.C#大部分对象在进行垃圾回收时都可以回收,包括非托管资源,因为非托管资源都已经通过C#类进行了封装,会将非托管资源的释放放在析 ...
- C# 特性 System.ComponentModel 命名空间属性方法大全,System.ComponentModel 命名空间的特性
目录: System.ComponentModel 特性命名空间与常用类 System.ComponentModel.DataAnnotations ComponentModel - Classes ...
- 乘风破浪:LeetCode真题_001_TwoSum
乘风破浪:LeetCode真题_001_TwoSum 一.前言 沉寂了很长时间,也悟出了很多的道理,写作是一种业余的爱好,是一种自己以后学习的工具,是对自己过往的经验积累的佐证,是检验自己理解深入度的 ...
- [原]外网访问用azure虚拟机搭建的网站
1.Ubuntu+Apache+PHP的环境搭建(此处省去了mysql的步骤) 在azure上搭建上述的开发环境和在本地PC搭建是一样的步骤,具体介绍请参看这里. 2.从外网访问 注意,这一步的前提是 ...
- 对volatile不具有原子性的理解
在阅读多线程书籍的时候,对volatile的原子性产生了疑问,问题类似于这篇文章所阐述的那样.经过一番思考给出自己的理解. 我们知道对于可见性,Java提供了volatile关键字来保证可见性.有序性 ...
- lvs安装文档
安装lvs应用模块 1.安装依赖包: [root@client lvs]# yum -y install ipvs* 2.验证本机ip_vs模块是否加载 [root@client lvs]# -.el ...