echartsはどのように自動的に幅を調整しますか

EChartsグラフの自動幅合わせを実現するには、以下の方法を使用します。

  1. Echarts描画コンテナの幅をパーセンテージで指定することで、親要素の幅に応じてコンテナの幅を自動調整できます。たとえば、コンテナの幅を100%に設定します。
#chartContainer {
  width: 100%;
}
  1. ページ読み込み後に JavaScript でコンテナ要素の幅を取得し、Echarts の初期化関数に渡すことで、JavaScript によってコンテナ幅を動的に設定できます。これにより、ウィンドウのサイズが変更された場合、コンテナの幅は自動的に調整されます。例:
// 获取容器元素
var chartContainer = document.getElementById('chartContainer');

// 获取容器宽度
var containerWidth = chartContainer.clientWidth;

// 初始化Echarts图表
var myChart = echarts.init(chartContainer);

// 设置图表的宽度为容器宽度
myChart.resize({
  width: containerWidth
});

なお、上記コードはあくまで例です。実際の適用時はそれぞれの環境に合わせて適切に変更してください。

bannerAds