Echarts高和寬自適應問題

寫在前面：echarts如果不給高度是無法顯示的，這在很多場景中是非常不方便的。以下通過父div的高來計算echarts的高，以達到高度自適應的需求。

以下代碼是在vue中引用echarts。

頁面代碼：

<div class="chartDiv" id="chartDiv_h">
       <div id="myChart_h"></div>
</div>

父div的css樣式：

.chartDiv{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

echarts代碼塊：

let myChartId = document.getElementById(chartId);
//高度計算
this.chartssize(document.getElementById(chartPid),myChartId);

let myChart = echarts.init(myChartId);
let option = {
          。。。
        };
// 為echarts對象加載數據
myChart.clear();
myChart.setOption(option,true);
//建議加上以下這一行代碼，不加的效果圖如下（當瀏覽器窗口縮小的時候）。超過了div的界限（紅色邊框）
window.addEventListener('resize', function () {
      myChart.resize()
});

高度計算方法chartssize（）：

    //為圖表計算高度
    chartssize(container, charts) {
      function getStyle(el, name)
      {
        if (window.getComputedStyle) {
          return window.getComputedStyle(el, null);
        } else {
          return el.currentStyle;
        }
      }
      let wi = getStyle(container, 'width').width;
      let hi = getStyle(container, 'height').height;
      charts.style.height = hi；
    }

寫在后面：針對js部分的問題打開瀏覽器開發者模式，使用斷點在console里面直接書寫js代碼慢慢調試可以發現解決大部分問題。