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系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...
随机推荐
- mysql中int、bigint、smallint 和 tinyint的区别与长度的含义【转】
最近使用mysql数据库的时候遇到了多种数字的类型,主要有int,bigint,smallint和tinyint.其中比较迷惑的是int和smallint的差别.今天就在网上仔细找了找,找到如下内容, ...
- python文本操作
file_obj=file("文件路径","模式") 打开文件的模式有: r,以只读方式打开文件 w,打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该 ...
- Hypver-V中的快照
应用快照选项的区别: 获取并应用快照:对虚拟机当前的状态进行快照,然后恢复到所选的快照状态 应用:不保存当前虚拟机的状态,直接将其恢复到所选的快照状态
- Python学习---django之ORM的增删改查180125
模型常用的字段类型参数 <1> CharField #字符串字段, 用于较短的字符串. #CharField 要求必须有一个参数 maxlength, 用于从数 ...
- Python学习---Django的基础学习
django实现流程 Django学习框架: #安装: pip3 install django 添加环境变量 #1 创建project django-ad ...
- Java虚拟机9:垃圾收集(GC)-4(垃圾收集器)
1.前言 垃圾收集器是前一章垃圾收集算法理论知识的具体实现了,不同虚拟机所提供的垃圾收集器可能会有很大差别,另外我们必须提前说明一个道理:没有最好的垃圾收集器,更加没有万能的收集器,只能选择对具体应用 ...
- 使用jenkins SonarQube gitlab 构建自动化发布系统
目前持续集成的生态越来越完善,工具也有很多,开源的或商业的.如: 最最流行的,也是使用最多的 Jenkins 有着持续集成DNA的ThoughtWorks GO.理念:"Deployment ...
- [19/05/01-星期三] GOF23_行为型模式(策略模式、模板方法模式)
一.策略模式(strategy) [策略接口] /*** * "策略"接口 */ package cn.sxt.strategy; public interface Strateg ...
- 3、Web Service-Jaxws(Eclipse版本)
1.概述 开发手段: 使用jdk开发(1.6及以上的版本) 使用CXF框架开发 组成: -服务器端 -客户端 2.使用JDK开发 1).服务器端 -@WebService(SEI和SEI的实现类) - ...
- 架构图以及vue的简介
架构图 前后端分离总架构图 前端架构设计图 MVVM架构模式 MVVM的简介 MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数 ...