echarts横向柱状图高度随动态数据长度自适应

鲸鱼前端大师

已于 2022-04-20 15:13:20 修改

阅读量4.8k

点赞数 4

文章标签： echarts 前端 vue.js

于 2022-04-20 14:58:08 首次发布

本文链接：https://blog.csdn.net/weixin_54351962/article/details/124297111

版权

本文主要探讨如何解决Echarts横向柱状图在后端返回数据动态变化时，容器高度自适应的问题。当数据量过大，如果容器高度固定，内容会压缩显示；若无高度设定，则内容可能无法完全展示。关键在于通过获取y轴数据长度动态计算高度，并使用Echarts的resize方法调整图表大小，确保瀑布流式的完整展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.需求
echarts横向柱状图的容器高度，随后端返回的动态数据的长度自适应，瀑布流式展示

二.分析
难点：echarts的容器高度若是写死的话，后端返回数据过多时，则呈现的效果是容器高度不变，内容会被压缩的很小，但是会展示全；如果不给容器设置高度的话，他会默认一个高度，后端返回数据过多时，则呈现的效果是容器高度为默认高度，内容展示不全，容器装不下的、剩下的内容会被遮挡看不见

三.关键性代码和注释如下

<div id="main2" style="width:100%"></div>
//注意宽度不写，echarts不会展示；高度不可写死，否则不能实现容器的高度自适应了

drawChart2(){
      var option2={
      //这里写你需要对应的配置项去控制这个echarts的样式与数据源
      }
      let myChart = this.$echarts.init(document.getElementById('main2'))
      //获取到这个echarts图表的节点,并初始化
      myChart.setOption(option2);
      //将该echarts用之前配置好的option2的配置项进行渲染
      var autoHeight = option2.yAxis.data.length* 50 + 150
      //获取option2配置项中y轴的数据源的长度*每个柱状你想设定的高度+150的预留高度
      myChart.getDom().style.height = autoHeight + "px"
      //echarts有个getDom（）的方法可以设置获取 ECharts 实例容器的 dom 节点，给节点分别设置高度
      myChart.getDom().childNodes[0].style.height = autoHeight + "px"
      myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight)
      myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px"
      //根据窗口的大小变动图表
      myChart.resize()
 }