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系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...
随机推荐
- 软工读书笔记 week4 ——《黑客与画家》下
因为时间有限,只对书中后半部分几个篇章进行了阅读. 一.另一条路 作者以他自己为例,在那个没人知道什么叫“软件运行在服务器时”的时代,他和朋友选择创业时,没有选择写传统的桌面 ...
- SpringMVC中使用DispatcherServlet
接触Web开发的时候我们会利用Servlet来接收和转发前端页面的各种请求,我们通常会在一个页面中对应一个Servlet来处理这个页面上和用户交互的信息,通常我门遇到5个以内的页面自己来写Servle ...
- 用java实现从命令行接收多个数字,求和之后输出结果。
用java实现从命令行接收多个数字,求和之后输出结果. 1 设计思想: (1)建立类. (2)输出参数个数. (3)定义int型的num和sum,分别用来存储参数和参数的和. (4)用for循环讲参数 ...
- ORM------多表操作
上面介绍了单表操作 下面就好比我们的sql语句这只能满足于我们的一些简单的操作不能适应我们更多的需要 所以我们需要用到更多的需求来进行我们的关系的建立以及查找 其实ORM语句就对应着我们的sql语句 ...
- ASP.NET Core 上传多文件 超简单教程
示例源码下载地址 https://qcloud.coding.net/api/project/3915794/files/4463836/download 项目地址 https://dev.tence ...
- Spring Boot 的配置文件
Profile 配置 Profile 是 Spring 用来针对不同的环境对不同的配置提供支持的,全局的 Profile 配置使用 application-{profile}.properties ( ...
- PetaPoco轻量级ORM框架 - 对Database类的进行扩展,可以返回Table格式数据
一.有时我们需要将常用的功能添加到PetaPoco中的Database类中 实现方式有2种,以下以查询字段为例 1.通过扩展方式实现,此方式不改变被调用(Database)类名(只能增加方法) pub ...
- SQL的别名和SQL的执行顺序和SQL优化
SQL的别名 1.不可以在where子句中使用列名的别名,即select name t from emp where t>2999;是不允许的 2.使用别名的好处: 提高SQL的易读性 提高SQ ...
- 【[AHOI2008]逆序对】
被锤爆了 被这个题搞得自闭了一上午,觉得自己没什么前途了 我又没有看出来这个题的一个非常重要的性质 我们填进去的数一定是单调不降的 首先如果填进去的数并不是单调不降的,那么填进去本身就会产生一些逆序对 ...
- 基于Azure Blob冷存储的数据压缩备份总结
基于上一篇的压缩算法对比分析报告,选择了LZ4算法的普通模式,其测试压缩率为28%,20G压缩时间为256s,估计1T的冷备时间为3.5h. 接下来,将23T的HBase历史数据进行了压缩冷备,压缩后 ...