测试提了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. 不同classloader装载的类不能互相访问?

    一,有两个术语,一个叫“定义类加载器”,一个叫“初始类加载器”. 比如有如下的类加载器结构: bootstrap   ExtClassloader     AppClassloader     -自定 ...

  2. Launcher代码大全

    蜂窝网络:prefs:root=MOBILE_DATA_SETTINGS_ID VPN:prefs:root=General&path=Network/VPN Wi-Fi:prefs:root ...

  3. jquery flexslider 轮播插件

    去官网下载最新的 https://www.woothemes.com/flexslider/ 引入 css 和 js api $(window).load(function() { $('.flexs ...

  4. char函数绕过魔术引号注入

    我目前学习到的绕过魔术引号的几种方法(如果知道还有别的请万望告之): 1.倘若服务端是GBK可以尝试宽字节注入 2.使用char函数绕过魔术引号进行注入 3.同char函数类似的函数,例如bin(转换 ...

  5. Redis简单介绍

    redis简单介绍 Redis VS key-value缓存产品 Redis支持数据的持久化,能够将内存中的数据保持在磁盘中,重新启动的时候能够再次载入进行使用. Redis不只支持简单的key-va ...

  6. C语言 · 打印1~100间的质数(素数)

    算法提高 c++_ch02_04   时间限制:1.0s   内存限制:256.0MB      问题描述 输出1~100间的质数并显示出来.注意1不是质数. 输出格式 每行输出一个质数. 2 3 . ...

  7. Linux快速定位并且杀掉占用端口的进程

    1.定位 lsof -i:8811(端口号) 2.杀掉进程 kill -9 63924

  8. 数论 + 容斥 - HDU 1695 GCD

    problem's Link mean 给定五个数a,b,c,d,k,从1~a中选一个数x,1~b中选一个数y,使得gcd(x,y)=k. 求满足条件的pair(x,y)数. analyse 由于b, ...

  9. 8天学通MongoDB(mark)

    转自:http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html 关于mongodb的好处,优点之类的这里就不说了,唯一要 ...

  10. Servlet开发-----基础及MVC设计模式

    一.Servlet介绍   Servlet本身只是普通的Java类,只有当容器为他创建了ServletConfig和ServletContext时才成为了一个Servlet:   Servlet简单的 ...