在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踩坑---容器高度自适应的更多相关文章

  1. 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  2. ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化

    问题现象 使用ECharts树图,在数据维度大,节点过多时,所看到的内容会重叠交错,无法查看. 原因 在给定ECharts树图容器尺寸后,无论数据多么庞大或者稀少,数据始终会尝试在给定容器内撑满.全部 ...

  3. echarts踩坑总结

    1,有关echarts引用的相关报错直接写这句  import * as echarts from 'echarts' 2,折线图 chartsObj = { tooltip: { trigger: ...

  4. echarts 踩坑 : id必须不同

    我们可能用react前端框架开发项目. 也就是组件化开发. 一个页面里可能有很多组件. 而echarts是寻找特定ID的DOM去渲染的. 也就是说,如果整个页面.包括所有页面组件,有id相同的DOM, ...

  5. echarts 踩坑 : 为什么效果出不来?看看有没有正确引入

    今天我要给 echarts 组件加个 dataZoom 功能,结果发现没有效果. 后来发现是引入 echarts 模块的问题. 如果是按需引入的话,必须引入相应的功能模块才能使用相应的功能. 举例: ...

  6. echarts 踩坑 : 为什么触摸柱状图的时后柱子不见了?原来是color的锅!

    今天发现一个奇怪的问题. 当我的鼠标触摸柱状图的时候,柱状图就消失了. 后来发现是颜色的设置有问题. color: ['rgba(68,238,224)', 'rgba(17,215,255)', ' ...

  7. flex自适应高度内容高度超出容器高度自动出现滚动条的问题

    在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...

  8. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  9. 里面的div怎么撑开外面的div让高度自适应

    参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...

随机推荐

  1. 需求分析之WBS

    我们的产品就是当你把废旧的塑料瓶和电池投入回收箱中会产生能量,那么这能量可以干嘛呢那就通过我们的APP进行扫码记录所产生的能量这写能量可以在我们的APP的换吧中进行兑换用户所需要的东西比如:共享单车的 ...

  2. Java代码调用存储过程和存储方法

    准备一个oracle 的JDBC jar 包:ojdbc14_11g.jar 首先找到你的 oracle 安装位置,例如: 1.创建一个JDBC数据库连接工具类: package com.test.d ...

  3. 用windows公文包实现不同盘符两个文件文件夹文件同步

    需求:磁盘D的文件夹A需同步到磁盘E 步骤: 1.在磁盘E中新建公文包B 2.将D盘的文件夹A复制到公文包B 3.修改文件夹A中的内容 4.选中公文包B,右键"全部更新"

  4. Azure Internet 负载均衡器建立

    摘自微软官方文档 Azure load balancer 是位于第 4 层 (TCP, UDP) 的负载均衡器. 该负载均衡器可以在云服务或负载均衡器集的虚拟机中运行状况良好的服务实例之间分配传入流量 ...

  5. 如何用iOS工程生成iOS模拟器包

    1. 在终端上运行下面的命令来查找你的机器上可用的SDK的版本 xcodebuild -showsdks 2. 创建模拟器包: xcodebuild -workspace ** -scheme ** ...

  6. 阿里八八“好记”——UML设计

    团队分工 叶文滔:软件整体框架部分 俞鋆:后端数据库部分 王国超:日程多日显示部分 黄梅玲:日程详细显示部分 张岳.刘晓.李嘉群:用户部分 UML设计 整体框架 用例图 类图 活动图 状态图 数据库部 ...

  7. SQL简单基础(1)

    对于SQL不再做过多的介绍,毕竟作为一个初学者对于SQL(结构化查询语言)也好,关系型数据库也好理解都并不是很深,只知道一些基本的概念. 本系列旨在介绍一些简单开发中用得上的SQL语句以及其使用方法, ...

  8. Gym 100633G Nano alarm-clocks

    题目,给定n个时钟,要求把他们调成一样的时间.求最小的步数 思路:肯定是有一个时钟作为标准的啦,要找到这个时钟,怎么找呢?没其他方便的方法,暴力枚举.那么枚举后,怎么能快速地算到其他时钟转到这个时钟的 ...

  9. SoapUI这么好,舍得不用吗?

    之前尝试去学习哈SoapUI, 安装都报错,直接拖黑不用,对java开发的产品本身不感冒 后来工作上,和老外沟通,发现他们不会用xmlspy,只会SoapUI,心里都想,不学习看来不方便,然后都安装了 ...

  10. BZOJ1499:[NOI2005]瑰丽华尔兹(DP,单调队列)

    Description 你跳过华尔兹吗?当音乐响起,当你随着旋律滑动舞步,是不是有一种漫步仙境的惬意?众所周知,跳华尔兹时,最重要的是有好的音乐.但是很少有几个人知道,世界上最伟大的钢琴家一生都漂泊在 ...