测试提了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. maven中配置jdk版本

    1 maven 中配置 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins< ...

  2. ASP.NET基础(一)

    ExecuteNonQuery()的用法 下面我们将详细讲解如何在Page_Load()中对数据库的增加.删除.修改,最后我们再来总结一下ExecuteNonQuery(),ExecuteScalar ...

  3. 扩展RBAC用户角色权限设计方案<转>

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  4. Mybatis Batch 批量操作

    Mybatis Batch 批量操作 http://www.blogjava.net/diggbag/articles/mybatis.html

  5. 编译Spark2.1.2源码

    源码编译的shell脚本为 /dev/make-distribution.sh ,下载源码包解压就能找到.不同版本使用的参数有差异.可以直接查看make-distribution.sh文件. 下载sp ...

  6. EMC、Pure和NetApp推新品,NAS闪存场景在哪里

    Hardy 架构师技术联盟 All Flash/SSD存储的趋势势不可挡,未来在NAS服务上也是如此,眼下已经有非常多家初创厂商支持全SSD的NAS存储服务,包含EMC Isilion也推出了全闪存节 ...

  7. 数据库 proc编程五

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  8. VS2005环境下采用makefile编译、使用libjpeg.lib函数库

    1.从www.ijg.org下载源码,解压后得到文件夹jpeg-8d 2.在文件夹里新建jconfig.h文件,将jconfig.vc里的内容拷到jconfig.h中 3.编译. Run->CM ...

  9. c#用run32dll打开系统dll(如系统图片查看器,并置最顶层)

    [DllImport("user32.dll", EntryPoint = "SetWindowPos",CharSet = CharSet.Auto)] st ...

  10. PHP实现对站点内容外部链接的过滤方法

    熟悉SEO的朋友都知道,对于网站外部链接失效的情况如果链接带有rel="nofollow"属性可以避免不必要的损失.本文就以实例形式演示了PHP实现对站点内容外部链接的过滤方法.具 ...