echarts容器动态设置高度
2024-08-31 05:10:34
测试提了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});
最新文章
- Bubble Cup 8 finals F. Bulbo (575F)
- POJ 1459:Power Network(最大流)
- 烂泥:通过binlog恢复mysql数据库
- Object C学习笔记21-typedef用法
- thinkphp 3.2 单入口 多模块 不能加载index控制器问题
- <;十二>;面向对象分析之UML核心元素之节点和设备
- HDU 5783 Divide the Sequence
- [转]JavaScript 的同源策略
- [WPF] 将普通的Library工程,改造成WPF Custom Control 的Library
- #include <;windows.h>;
- margin 属性的相关问题
- ZooKeeper - Perl bindings for Apache ZooKeeper Perl绑定用于 Apache ZooKeeper
- 【转】获取/设置IFRAME内对象元素的几种JS方法
- tornado返回指定的http code
- NVisionXR引擎基本介绍
- thrift实现HDFS文件操作
- 【Angular专题】——(2)【译】Angular中的ForwardRef
- Sunday串匹配算法 C语言实现
- 170824、storm 环境搭建
- java由字符型强制转化为整型例题
热门文章
- STM32 中断应用概览
- 查看cpu 个数, 内存信息
- jquery checkbox勾选/取消
- sublime text 3中配置golang开发环境
- php json包 Services_JSON-1.0.2 1 ---one
- exif_imagetype() 函数在linux下的php中不存在
- java中main方法的 (String []args)
- RabbitMQ OS X下安装及常用命令-1
- Visual Studio Code调试node.js:无法在PATH上找到运行时的node
- 编程之美 set 18 拈两堆石子游戏(3)