1. 程式人生 > 遊戲 >Steam新一週銷量榜 《艾爾登法環》四連冠

Steam新一週銷量榜 《艾爾登法環》四連冠

測試提了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 * 35 + 50; // counst.length為柱狀圖的條數,即資料長度。35為我給每個柱狀圖的高度,50為柱狀圖x軸內容的高度(大概的)。
          chartName.resize({height:this.autoHeight});