1. 程式人生 > 實用技巧 >echarts容器動態設定高度

echarts容器動態設定高度

柱狀圖資料多的情況下,都疊到了一起,效果圖如下:

要解決這個bug,我首先想到的是讓柱狀圖的容器自適應高度。於是,把原來div上寫的固定高度去掉。

<div id="myChart1" style={{height:400px',width:'100%'}}></div>

變成:

<div id="myChart1" style={{width:'100%'}}></div>

這時,你會發現容器沒有高度,柱狀圖根本顯示不出來。那麼,如何給容器及其渲染完資料後的canvas動態加上高度呢?(紅色框為setOption繪製圖表後出現的)

解決方法:

echarts文件關於resize

: https://echarts.apache.org/zh/api.html#echartsInstance.resize

	componentDidMount() {
    this.myChart = echarts.init(document.getElementById("myChart1"));
    const autoHeight = counts.length * 35 + 50; // counst.length為柱狀圖的條數,即資料長度。35為我給每個柱狀圖的高度,50為柱狀圖x軸內容的高度(大概的)。
    this.myChart.resize({height: autoHeight}); 
  }