echarts容器動態設置高度
阿新 • • 發佈:2018-11-23
soft art des 測試 eight span bubuko col 高度
測試提了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繪制圖表後出現的)
解決方法:
在setOption繪制完圖表的代碼後面,給容器加上高度,以下用到了echarts實例下的方法getDom(),
// getDom() 獲取 ECharts 實例容器的 dom 節點 let chartName = this.$echarts.init(document.getElementById("myChart1")); this.autoHeight = counts.length * 35 + 50; // counst.length為柱狀圖的條數,即數據長度。35為我給每個柱狀圖的高度,50為柱狀圖x軸內容的高度(大概的)。chartName.getDom().style.height = this.autoHeight + "px"; chartName.getDom().childNodes[0].style.height = this.autoHeight + "px"; chartName.getDom().childNodes[0].childNodes[0].setAttribute("height",this.autoHeight); chartName.getDom().childNodes[0].childNodes[0].style.height = this.autoHeight + "px"; chartName.resize();
echarts容器動態設置高度