测试提了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. C/C++中printf和C++中cout的输出格式

    一. Printf 输出格式 C中格式字符串的一般形式为: %[标志][输出最小宽度][.精度][长度]类型,其中方括号[]中的项为可选项.各项的意义介绍如下:1.类型类型字符用以表示输出数据的类型, ...

  2. hdu6143 Killer Names 容斥+排列组合

    /** 题目:hdu6143 Killer Names 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6143 题意:有m种字符(可以不用完),组成两个长度 ...

  3. [velocity] velocity详解

    (1)为什么要使用模版语言? 在服务器端可以使用 Velocity 处理模板和生成的动态内容(HTML.XML等).这和 JSP 技术的目标非常接近.但是,JSP 模型可以毫无阻碍地访问底层的 Ser ...

  4. C++ 函数的扩展①

    //函数扩展--内联函数 inline #include<iostream> using namespace std; /* c++中const常量可以替代宏常数定义 如: const i ...

  5. 【BZOJ】1004: [HNOI2008]Cards(置换群+polya+burnside)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1004 学习了下polya计数和burnside引理,最好的资料就是:<Pólya 计数法的应用 ...

  6. php使用json_encode后出现中文乱码的解决方法

    <?php header("content-type:text/html;charset=utf-8"); $data = array('a'=>123,'b'=> ...

  7. hdu 2141:Can you find it?(数据结构,二分查找)

    Can you find it? Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/10000 K (Java/Others ...

  8. mybatis总结(三)之多表查询

    上一节,已经把实体类和配置文件都写过了,这节课直接添加几个方法吧 在DeptMapper.xml文件中添加 <!-- 多表查询(1对多) ,通过部门编号,查询出部门所在的员工姓名,部门名,部门编 ...

  9. 程序阅读:简单C++学生信息管理系统

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [程序阅读]阅读并执行以下的程序,找出当中出现 ...

  10. java基础---->string字面量的使用

    这里简单的理解一下java中关于string字面量的知识,关于字节码可以使用java自带的javap工具查看. string字面量 一.直接贴出测试的代码 A string literal alway ...