测试提了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. JQuery.getJSON 没反应

    Jquery是一个优秀的Javascrīpt框架,轻量级的js库,它兼容CSS3.jQuery使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX ...

  2. [Linux]Linux printf 输出重定向

    方法一 #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <sys/st ...

  3. NAT--Network Address Translator

    定义 Nat用于在本地网络中使用私有地址,在连接互联网时转而使用全局IP地址的技术.除了转换IP地址外,还出现了可以转换TCP.UDP端口号的NAPT(Network Address Ports Tr ...

  4. NameNode机制和DataNode机制

    首先我们看一下NAMENODE: 我们已经知道了NAMENODE作为DATANODE的管理者,其重要性不言而喻,那么NAMENODE是怎么管理数据的呢? 首先,我们看一下上面这张图,每次客户端读写数据 ...

  5. 虚拟化–操作系统级 LXC Linux Containers内核轻量级虚拟化技术

    友情提示:非原文链接可能会影响您的阅读体验,欢迎查看原文.(http://blog.geekcome.com) 原文地址:http://blog.geekcome.com/archives/288 软 ...

  6. 禁止复制 + 锁右键 + 禁止全选(兼容IE Chrome等)

    function iEsc() { return false; }function iRec() { return true; }function DisableKeys() {    if (eve ...

  7. URLDecoder: Incomplete trailing escape (%) pattern问题处理

    http://blog.csdn.net/yangbobo1992/article/details/10076335 _________________________________________ ...

  8. Linux - Windows10连接linux服务器

    当我们通过windows连接服务器时,大多数用的是ssh客户端软件,推荐使用ssh,安全系数比较高.下面介绍用telnet连接服务器. 客户端:C:\Users\dell>systeminfo主 ...

  9. 使用asp.net调用谷歌地图api

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  10. centos7安装avahi

    sudo yum install avahi sudo yum install avahi-tools 转自: http://unix.stackexchange.com/questions/1829 ...