echarts踩坑---容器高度自适应

  在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题。

  具体解决办法如下:

  <div  id="myChart1" :style="{width:'650px'}" class="chart-css" ref="myEchart1"></div>

  let myChart = this.$echarts.init(document.getElementById("myChart1"));

  this.autoHeight = this.counts * 55 + 50; // this.counts为柱状图的条数,即数据长度。

  myChart.getDom().style.height = this.autoHeight + "px";

  myChart.resize();

  

  通过以上代码即可解决echarts里面高度自适应问题。

posted @ 2018-12-20 20:10  催晚  阅读(11834)  评论(0编辑  收藏  举报