测试提了bug,柱状图数据多的情况下,都叠到了一起,效果如下图。

要解决这个bug,首先想到的是让柱状图的容器自适应高度。于是,把原本div上写固定的高度去掉。

  <div  id="myChart1" :style="{height:'600px',width:'650px'}" class="chart-css" ref="myEchart1"></div>

变成:

  <div  id="myChart1" :style="{width:'650px'}" class="chart-css" ref="myEchart1"></div>

这时,你会发现容器没有高度,柱状图根本就显示不出来。那么,如何给容器及其渲染完数据后的canvas动态加上高度呢?(红色框为setOption绘制图表后出现的)

解决方法:

          let chartName = this.$echarts.init(document.getElementById("myChart1"));
this.autoHeight = counts.length * + ; // counst.length为柱状图的条数,即数据长度。35为我给每个柱状图的高度,50为柱状图x轴内容的高度(大概的)。
chartName.resize({height:this.autoHeight});

echarts容器动态设置高度的更多相关文章

  1. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  2. 控件View动态设置高度时会卡顿、速度慢的情况解决

    今天碰到这种情况,一直想不通是什么问题,之前一直设置高度的时候也不卡为何今天就这么卡了.做了很多小示例一直是很慢,后来试着把View的上级节点RelativeLayout的替换成了LinearLayo ...

  3. android RelativeLayout 动态设置高度

    定义: private RelativeLayout mrlay; 调高度: mrlay = (RelativeLayout) findViewById(R.id.rlay_1); android.v ...

  4. android 多个listView的向下滚动设置 listView动态设置高度代码

    墨迹天气图: 这里都是用的android里面的shape实现的,实现起来比较简单,只是在滚动的时候有点小麻烦... 当我们多个ListView超出了它的父控件LinearLayout的时候,它们每个L ...

  5. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  6. 实现ScrollView中包含ListView,动态设置ListView的高度

    ScrollView 中包含 ListView 的问题 : ScrollView和ListView会冲突,会导致ListView显示不全 <?xml version="1.0" ...

  7. js动态设置窗体位置

    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...

  8. ASPxGridview必须设置ShowVerticalScrollBar为true才能动态改变高度。。。

    ASPxGridview必须设置ShowVerticalScrollBar为true才能动态改变高度... 设置 ShowVerticalScrollBar=true ,这时client-side s ...

  9. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

随机推荐

  1. Mysql变量声明与使用

    set @today='2017-04-25';set @ydate=DATE_SUB(@today, INTERVAL 7 day);select @today, @ydate; 待续....

  2. pyspark采用python3开发

    现在时间2017-04-17. python版本3.5支持pyspark python3.6目前还不支持 做法简单,只需要在bin/pyspark中增加 export PYSPARK_PYTHON=p ...

  3. 基于HTML5 Canvas 实现的 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  4. am335x omap serial 驱动分析

    am335x 自身的 uart 驱动集成在 kernel 的 arch/arm/mach-omap2/ 里面. 文件是 arch/arm/mach-omap2/serial.c // 看到最底部 om ...

  5. 使用模板方法模式简化JDBC操作

    在使用JDBC时,会重复的写很多重复的代码,例如 Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; S ...

  6. linux - native task api 测试

    #include <stdio.h>#include <signal.h>#include <unistd.h>#include <sys/mman.h> ...

  7. jquery ajax 的用法

    jquery的ajax请求的主要参数 beforeSend:发送ajax请求之前 success:发送ajax请求成功 error:发送ajax请求错误,通常是网络失去连接.服务器出错.后台方法错误等 ...

  8. 一起talk C栗子吧(第十回:C语言实例--最小公倍数)

    各位看官们,大家好.从今天開始,我们讲大型章回体科技小说 :C栗子.也就是C语言实例. 闲话休提, 言归正转.让我们一起talk C栗子吧! 看官们,上一回中咱们说的是最大公约数的样例,这一回咱们说的 ...

  9. maven环境的配置

    http://maven.oschina.net/help.html     --配置说明 http://maven.oschina.net/index.html#nexus-search;quick ...

  10. Docker 如何把镜像上传到docker hub

    1 首先你得准备一个hub 的帐号, 去 https://hub.docker.com 注册吧! 2 在hub那里新建一个仓库, 这个就类似于github那边的..create ---> cre ...