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" ...
随机推荐
- 利用css3背景位置完成拼图
.duo { width: 623px; height: 417px; margin: 100px auto; background: url(images/bg1.png) left top no- ...
- 华农校赛--G,用set比较大小,缩短时间复杂度
Array C Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 581 Solved: 101[Submit][Status][Web Board] D ...
- matlab_legend_使用
matlab legend 使用 用Matlab画图时,有时候需要对各种图标进行标注,例如,用“+”代表A的运动情况,“*”代表B的 运动情况.legend函数的基本用法是LEGEND(string1 ...
- asp.net 导出EXCEL超高兼容(不用装Excel)
用网上的代码你会发现,下载下来后,会提示"你尝试打开的的文件的格式与文件扩展名指定的格式不一致 请验证文件没有损坏且来源可信的提示,研究了好久 后来发现可以使用人家做好的组件NOPI去实现, ...
- 模板题 + KMP + 求最小循环节 --- HDU 3746 Cyclic Nacklace
Cyclic Nacklace Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=3746 Mean: 给你一个字符串,让你在后面加尽 ...
- 一般来说,主方法main()结束的时候线程结束
suspend()是将一个运行时状态进入阻塞状态(注意不释放锁标记).恢复状态的时候用resume().Stop()指释放全部. 这几个方法上都有Deprecated标志,说明这个方法不推荐使用. 一 ...
- QTreeWidget 获取被双击的子项的层次路径
from PyQt5.QtWidgets import (QApplication, QWidget, QHBoxLayout, QTreeWidget, QTreeWidgetItem, QGrou ...
- jQuery对象与javaScript对象的互换
1. jQuery对象-->Dom对象 1) 通过 .[0] 的方式: var $s = $(.class); (jQuery对象) var s = $s.[0]; ...
- uva 610(tarjan的应用)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=23727 思路:首先是Tarjan找桥,对于桥,只能是双向边,而对于 ...
- iOS开发之--FMDB的使用
在很多时候,我们会用到数据库,我们移动端使用的数据库,一般都是嵌入型数据库,是一种较轻型的数据库, 一般很多时候,大牛封装的FMDB的第三方,已经足够满足我们的需求了! 现在分享一下自己的学习心得,希 ...