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" ...
随机推荐
- 0069 如何在Intellij IDEA中查看Spring MVC项目的所有请求与处理方法的映射列表
@RequestMapping注解分散于Controller中,如何在一个列表中看到所有的请求呢,比如下面这样: File-->Project Structure-->Modules--& ...
- C#和sqlserver中生成新的32位GUID
C#中用Guid.NewGuid().ToString() Sql中用NEWID() 以上方法生成的是36位的GUID,如果需要转换成32位,则需要替换掉其中的'-'字符. Sql中的方法:repla ...
- [Linux内核]ctrl-z/fg/bg/nohup/setsid/()与&/disown/screen
转自:https://my.oschina.net/alphajay/blog/65058 My Tips: Ctrl -z -> suspend fg -> ...
- Android——Android Bundle类(转)
今天发现自己连Bundle类都没有搞清楚,于是花时间研究了一下. 根据google官方的文档(http://developer.android.com/reference/android/os/Bun ...
- 重启php
注意这是重启php,不是重启apache service php-fpm restart
- WebIM技术---编写前端WebSocket组件
过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...
- 常用cmd
net use 查询相应的共享文件 control userpasswords2--修改计算机的网络凭证 删除计算机记录的网络共享凭证 重启网络
- ubuntu安装wineqq遇到错误
在安装中发生了错误:Errors were encountered while processing: wine-qqintl 原因是还有lib没有配置,所以再输入sudo apt-get insta ...
- [NOIP 2014复习]第二章:搜索
一.深度优先搜索(DFS) 1.Wikioi 1066引水入城 题目描写叙述 Description 在一个遥远的国度,一側是风景秀美的湖泊,还有一側则是漫无边际的沙漠.该国的行政 区划十分特殊,刚好 ...
- 《Programming with Objective-C》第五章 Customizing Existing Classes
1.分类里面只新增函数,不要新增变量:虽然新增是语法合法的,但是编译器并不会为你的property合成相应的成员变量.setter和getter Categories can be used to d ...