1. 程式人生 > >echarts踩坑---容器高度自適應

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; // counst.length為柱狀圖的條數,即資料長度。

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

  myChart.resize();

  

  通過以上程式碼即可解決echarts裡面高度自適應問題。