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系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...
随机推荐
- 软工读书笔记 week3 (《黑客与画家》上)
一.何谓黑客? 黑客,在我们大多数普通人眼里,就是入侵计算机的人,通常还与干坏事挂钩.而书中告诉我们,这 并不是它的真正含义.而要想理解这本书,就要首先理解什么是黑客. 黑客这个词最初起源时,完全是一 ...
- Linux内核 网络数据接收流程图
各层主要函数以及位置功能说明: 1)sock_read:初始化msghdr{}的结构类型变量msg,并且将需要接收的数据存放的地址传给msg.msg_iov->iov_base. ...
- SQL语句的执行顺序 1>优先执行,然后依数字排序
1>…From 表 2>…Where 条件 3>…Group by 列 4>…Having 筛选条件 ...
- 使用iCarousel的旋转木马效果请求图片
使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...
- composer 应用【Modern PHP】
目录 安装(linux) composer.lock 文件 composer.josn 文件 自动加载PHP组件 组件包库地址 实例 composer私有仓库 composer 遵循PSR准则,解决安 ...
- 乘风破浪:LeetCode真题_005_Longest Palindromic Substring
乘风破浪:LeetCode真题_005_Longest Palindromic Substring 一.前言 前面我们已经提到过了一些解题方法,比如递推,逻辑推理,递归等等,其实这些都可以用到动态规划 ...
- ZT android -- 蓝牙 bluetooth (三)搜索蓝牙
android -- 蓝牙 bluetooth (三)搜索蓝牙 分类: Android的原生应用分析 2013-05-31 22:03 2192人阅读 评论(8) 收藏 举报 bluetooth蓝牙s ...
- Discuz3.3注册程序修改添加记录推荐人账号
Discuz3.3注册入口地址为:member.php?mod=register 一.member.php: 打开之后,代码非常简单. 其中有一句: $mod = !in_array($discuz- ...
- JavaScript浏览器检测之客户端检测
客户端检测一共分为三种,分别为:能力检测.怪癖检测和用户代理检测,通过这三种检测方案,我们可以充分的了解当前浏览器所处系统.所支持的语法.所具有的特殊性能. 一.能力检测: 能力检测又称作为特性检测, ...
- fastjson反序列化TemplatesImpl
环境参考第一个链接,直接用IDEA打开 编译EvilObject.java成EvilObject.class 先看poc,其中NASTY_CLASS为TemplatesImpl类,evilCode是E ...