echarts容器动态设置高度
测试提了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容器动态设置高度的更多相关文章
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- 控件View动态设置高度时会卡顿、速度慢的情况解决
今天碰到这种情况,一直想不通是什么问题,之前一直设置高度的时候也不卡为何今天就这么卡了.做了很多小示例一直是很慢,后来试着把View的上级节点RelativeLayout的替换成了LinearLayo ...
- android RelativeLayout 动态设置高度
定义: private RelativeLayout mrlay; 调高度: mrlay = (RelativeLayout) findViewById(R.id.rlay_1); android.v ...
- android 多个listView的向下滚动设置 listView动态设置高度代码
墨迹天气图: 这里都是用的android里面的shape实现的,实现起来比较简单,只是在滚动的时候有点小麻烦... 当我们多个ListView超出了它的父控件LinearLayout的时候,它们每个L ...
- vue中动态设置echarts画布大小
document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...
- 实现ScrollView中包含ListView,动态设置ListView的高度
ScrollView 中包含 ListView 的问题 : ScrollView和ListView会冲突,会导致ListView显示不全 <?xml version="1.0" ...
- js动态设置窗体位置
1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...
- ASPxGridview必须设置ShowVerticalScrollBar为true才能动态改变高度。。。
ASPxGridview必须设置ShowVerticalScrollBar为true才能动态改变高度... 设置 ShowVerticalScrollBar=true ,这时client-side s ...
- 动态设置iframe高度
<%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...
随机推荐
- 不同classloader装载的类不能互相访问?
一,有两个术语,一个叫“定义类加载器”,一个叫“初始类加载器”. 比如有如下的类加载器结构: bootstrap ExtClassloader AppClassloader -自定 ...
- Launcher代码大全
蜂窝网络:prefs:root=MOBILE_DATA_SETTINGS_ID VPN:prefs:root=General&path=Network/VPN Wi-Fi:prefs:root ...
- jquery flexslider 轮播插件
去官网下载最新的 https://www.woothemes.com/flexslider/ 引入 css 和 js api $(window).load(function() { $('.flexs ...
- char函数绕过魔术引号注入
我目前学习到的绕过魔术引号的几种方法(如果知道还有别的请万望告之): 1.倘若服务端是GBK可以尝试宽字节注入 2.使用char函数绕过魔术引号进行注入 3.同char函数类似的函数,例如bin(转换 ...
- Redis简单介绍
redis简单介绍 Redis VS key-value缓存产品 Redis支持数据的持久化,能够将内存中的数据保持在磁盘中,重新启动的时候能够再次载入进行使用. Redis不只支持简单的key-va ...
- C语言 · 打印1~100间的质数(素数)
算法提高 c++_ch02_04 时间限制:1.0s 内存限制:256.0MB 问题描述 输出1~100间的质数并显示出来.注意1不是质数. 输出格式 每行输出一个质数. 2 3 . ...
- Linux快速定位并且杀掉占用端口的进程
1.定位 lsof -i:8811(端口号) 2.杀掉进程 kill -9 63924
- 数论 + 容斥 - 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, ...
- 8天学通MongoDB(mark)
转自:http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html 关于mongodb的好处,优点之类的这里就不说了,唯一要 ...
- Servlet开发-----基础及MVC设计模式
一.Servlet介绍 Servlet本身只是普通的Java类,只有当容器为他创建了ServletConfig和ServletContext时才成为了一个Servlet: Servlet简单的 ...