Echarts高度自适應

在開發資料大屏的時候，有需求要求echarts圖表能自适應寬度和高度

實作原理：

• 在監聽頁面大小變化的時候，先監聽echarts父級元素的高度變化，計算出echarts的高度，然後再調用echarts的resize函數

關鍵代碼

window.addEventListener("resize", () => {
  if (this.subItemsEcharts) {
    // 計算echarts高度
    this.setEchartsHeight('sub-items', 'sub-items-echarts', 30)
    this.subItemsEcharts.resize();
  }
});
           

完整代碼

• template部分

<div class="sub-items">
  <p class="title">
    <span class="name">分項能耗</span>
  </p>
  <div id="sub-items-echarts" style="width:100%;height:250px"></div>
</div>
           

• mounted函數

window.addEventListener("resize", () => {
  if (this.subItemsEcharts) {
    // 計算echarts高度
    this.setEchartsHeight('sub-items', 'sub-items-echarts', 30)
    this.subItemsEcharts.resize();
  }
});
this.setEchartsHeight('sub-items', 'sub-items-echarts', 30)
           

• setEchartsHeight.js部分

export default function setEchartsHeight(className, idName, num = 0) {
  // 父級高度
  let fatherHeight = document.getElementsByClassName(className)[0].offsetHeight
  // 計算echarts高度
  let echartsHeight = fatherHeight - num
  // 指派
  document.getElementById(idName).style.height = echartsHeight + 'px'
}
           

• style部分

.sub-items {
    width: 90%;
    height: 48%;
    margin: 2% auto;

    .title {
      width: 100%;
      height: 30px;
      line-height: 30px;

      .name {
        padding-left: 18px;
      }
    }
  }
           

如果本文對你有幫助，請點個贊吧！