echarts コンテナのサイズは画面に合わせて調整されます

説明：

echarts コンテナでは、幅と高さを固定する必要があると規定されており、パーセンテージを使用する前回の試みも失敗しました。その理由は、コンテナーのサイズは、固定でもパーセンテージでも、初期読み込み時に 1 回だけ取得されるためです。このように、ページがプルされるとコンテナ自体が変更されますが、チャートは変更されません。

解決：

ウィンドウにリスニングイベントを設定し、ウィンドウの変更をリッスンしてechartのコンテナサイズを再取得します。

1. まず、コンテナの親コンテナの幅と高さを設定する必要があります(パーセンテージまたはピクセルを使用できます)。

2. コンテナの幅と高さをパーセントで設定します。

#chart {
  margin-top: 50px;
  width: 100%;
  height: 75%;
  transform: translateY(-40px);
}

3. setoption 後にタイマーを設定します

   chart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          chart.resize();
        };
      });

レンダリング:

混乱：

現在、グラフ コンテナを比例的に拡大縮小する方法はありません。望ましい結果は、中心を水平方向と垂直方向に維持し (位置のパーセンテージを設定できます)、グラフを比例的に拡大縮小することです。

検索した結果、パディングは幅のパーセンテージに基づいているため、コンテナを比例的にスケーリングするより一般的な方法は、高さを上部と下部のパディングで置き換えることであることがわかりました。しかし、echart の場合、高さがなければレンダリングできません。

当面はこの効果しか得られません。作成したサイクルでコンテナの幅を取得し、高さをパーセンテージで計算して CSS に返し、この関数をウィンドウ変更関数に追加してコンテナの高さを変更する必要がある場合があります。もう一度試してみる時間があります。