在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. 利用Java反射实现JavaBean对象相同属性复制并初始化目标对象为空的属性的BeanUtils

    有时遇到将数据传输对象转换成JSON串会将属性值为空的属性去掉,利用Java反射实现JavaBean对象数据传输对象的相同属性复制并初始化数据传输对象属性为空的属性,然后转换成JSON串 packag ...

  2. webpack学习笔记丁点积累

    webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...

  3. linux用户的增加与删除

    sudo useradd xxx 仅仅是添加用户, 不会在home目录添加帐号很简单 Ubuntu中提供了两种方式 图形界面 增加 和 Windows 一样 ,还有一种就是 Linux传统的 增加方法 ...

  4. leetcode coding base

    1. Contains Duplicate 2. Contains Duplicate II 3. Contains Duplicate III

  5. Java关于List<String> 进行排序,重写Comparator()方法

    1.对list进行排序,list中的参数类型是Stirng,参数的格式不完全一样,例如有null,"","51003","510020"等 ...

  6. 【Leetcode】【Easy】Isomorphic Strings

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  7. Django路由系统---url无命名分组

    django重点之url无命名分组[参数有顺序要求] settigs.py:增加STATICFILES_DIRS静态资源路径配置,名称为创建的文件夹名称 'DIRS': [os.path.join(B ...

  8. Java学习---JFreeChart动态图表

    JFreeChart是Java中开源的制图组件,主要用于生成各种动态图表.在Java的图形报表技术中,JFreeChart组件提供了方便.快捷.灵活的制图方法.作为一个功能强大的图形报表组件,JFre ...

  9. Linux crontab命令详解与实例

    内容有重复的,不过本着宁多勿少的原则就都看看吧,就当加深印象啦 基本格式 :* * * * * command分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示第2列表示小时 ...

  10. Linq使用技巧及查询示例(一)

    Linq的使用大体分为两种:语句表达式   和  方法 首先,我们要在控制器中定义好context private ApplicationDbContext db = new ApplicationD ...