echarts圖由於容器隱藏導致圖表不顯示問題解決辦法

開發過程中常常會遇到echarts圖由於容器隱藏導致圖表不顯示問題，最簡單的辦法就是給容器元素加上寬度和高度

容器加上固定的寬度和高度

<div id="res" style="height: 450px;width:1200px"></div>

然而在實際開發中某些場景下，要求圖表寬度100%顯示，而計算容器的寬度有時又會十分的麻煩。

延時初始化

使用bootstrap的tab元件模擬echarts圖表容器顯示隱藏情況

<link href="./plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="./plugins/echarts.min.js"></script>
<script src="./plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>

<div class="card mt-2" id="results">
  <div class="card-header p-2">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#aaa_con" style="cursor: pointer" onclick="handleChart('aaa')">aaa</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#bbb_con" style="cursor: pointer" onclick="handleChart('bbb')">bbb</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#ccc_con" style="cursor: pointer" onclick="handleChart('ccc')">ccc</a>
      </li>
    </ul>
  </div>
  <div class="card-body p-1" style="overflow-x: auto">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="aaa_con" role="tabpanel" style="min-height: 500px">
        <div id="aaares" style="height: 450px"></div>
      </div>
      <div class="tab-pane fade" id="bbb_con" role="tabpanel" style="min-height: 500px">
        <div id="bbbres" style="height: 450px"></div>
      </div>
      <div class="tab-pane fade" id="ccc_con" role="tabpanel" style="min-height: 500px">
        <div id="cccres" style="height: 450px"></div>
      </div>
    </div>
  </div>
</div>

<script>
  function drawChart(domId, title) {
    const chartDom = document.getElementById(domId);
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };

    option && myChart.setOption(option);
  }

  drawChart("aaares", "aaa");
  drawChart("bbbres", "bbb");
  drawChart("cccres", "ccc");

  function handleChart(title) {
    console.log(title);
  }
</script>

開啟頁面發現後面的兩個tab頁中的圖表未顯示。F12可以看到兩個圖表確實初始化了，只是width為0，原因應該是圖表初始化時容器未顯示，初始化寬度為0.

因此試著在初始化前修改容器的寬度，理想情況為修改為100%後寬度自適應，但圖表容器的寬度初始化為100px

const chartDom = document.getElementById(domId);
chartDom.style.width = "100%";//圖表容器寬度初始化為100
//chartDom.style.width = "1200px";//同圖表容器寬度和高度預定義的顯示效果
const myChart = echarts.init(chartDom);

其根本的問題應該是：tab切換需要時間，如果在tab頁切換完成之前，echarts圖表已完成初始化，那容器的寬度就會初始化為0，試著讓圖表延時初始化，看下能不能解決問題

  drawChart("aaares", "aaa");
  // drawChart("bbbres", "bbb");
  // drawChart("cccres", "ccc");

  function handleChart(title) {
    setTimeout(() => {
      drawChart(title + "res", title);
    }, 500);
  }

結果如下：所有的圖表初始化的寬度都相同了

延時辦法的也有侷限性：需要多次初始化圖表。

具體選擇哪種方法，可根據實際情況選擇。