echartsでアダプティブレサイズを実装する方法

EChartsチャートをレスポンシブにするには、次の手順に従ってください。

HTML ファイルに、ECharts チャートを配置する領域となるコンテナ要素を作成します。

<div id="chart-container"></div>

コンテナ要素の幅と高さを幅と高さに設定して、Echartsライブラリでチャートを初期化します。

// 获取容器元素

var container = document.getElementById(‘chart-container’);

// 创建图表实例

var chart = echarts.init(container);

// 设置图表的宽度和高度为容器元素的宽度和高度

chart.resize();

CSSスタイルを利用して、コンテナ要素の幅と高さを制御します。パーセントやレスポンシブな単位を設定することで、柔軟なレイアウトを実現できます。

#chart-container {

width: 100%;

height: 100%;

}

4. ウィンドウサイズの変更イベントをlistenし、ウィンドウサイズの変更時にチャートの幅と高さを再設定します。

window.addEventListener('resize', function() {

chart.resize();

});

上記の手順により、Echartsグラフはコンテナ要素のサイズに合わせて自動的に調整され、ウィンドウサイズが変更されると再調整されます。