echartsを使用し、自動的に画面をサイズに応じて調整

echartsの図表を画面の大きさに応じて自動調整するには、以下を行います。

グラフの幅と高さをパーセントに設定します。グラフのコンテナー要素の幅と高さをパーセント値に設定します。それにより親コンテナーに対して自動的にサイズ調整が行われます。

<div id="chartContainer" style="width: 100%; height: 100%;"></div>

2. windowのresizeイベントを利用する: ウィンドウサイズの変更イベントを監視し、イベントコールバック関数でechartsチャートのサイズを再調整できます。

// 获取图表容器元素

var chartContainer = document.getElementById(‘chartContainer’);

// 初始化图表

var myChart = echarts.init(chartContainer);

// 监听窗口大小改变事件

window.addEventListener(‘resize’, function() {

// 调整图表大小

myChart.resize();

});

ウィンドウのサイズが変更されると、グラフは新しいウィンドウのサイズにフィットするよう自動的にサイズを調整します。

3. CSSメディアクエリを利用する: CSSメディアクエリを使用することで、画面のサイズに応じてスタイルを切り替えて、レイアウトをレスポンシブにすることができます。

@media (max-width: 768px) {

/* 在小屏幕上的样式 */

#chartContainer {

width: 100%;

height: 300px;

}

}

@media (min-width: 769px) {

/* 在大屏幕上的样式 */

#chartContainer {

width: 100%;

height: 600px;

}

}

上記サンプルでは、画面サイズが768px以下の時はグラフのコンテナの高さは300px、それ以外は600pxになります。これにより、画面サイズに合わせてグラフのサイズが自動調整されます。

上記は一般的な方法であり、具体的なニーズに応じた適切な方法を選んで、echartsチャートの自適応レイアウトを実現できます。