echart の適応サイズを設定する方法

echart の適応サイズを設定する方法には、コンテナ サイズのパーセンテージ設定、サイズ変更イベント リスナー、および CSS メディア クエリが含まれます。詳細な導入: 1. グラフ コンテナの幅と高さをパーセント値に設定することで、コンテナ サイズをパーセントで設定します; 2. サイズ変更イベント リスナーは、ウィンドウ サイズの変更をリッスンすることで、グラフ コンテナの幅と高さをリセットできます。ウィンドウ サイズが変更されたときのグラフ ; 3. CSS メディア クエリでは、CSS でさまざまなスタイル ルールを定義することで、画面の幅と高さに応じてグラフ コンテナのサイズを設定できます。

ECharts は、インタラクティブで動的なチャートやグラフを作成するための JavaScript ベースのオープンソース視覚化ライブラリです。豊富なチャート タイプと柔軟な構成オプションを提供し、開発者がさまざまなデータ視覚エフェクトを簡単に作成できるようにします。

ECharts を使用する場合、一般的な要件は、さまざまなデバイスや画面サイズに合わせてグラフを自動サイズ変更できるようにすることです。以下では、ECharts チャートの適応サイズを設定するためのいくつかの一般的な方法を紹介します。

1. パーセンテージを使用してコンテナ サイズを設定します:

グラフ コンテナの幅と高さをパーセンテージ値に設定することで、グラフを環境に適応させることができます。親コンテナのサイズ。たとえば、グラフ コンテナの幅を「100%」、高さを「100%」に設定すると、グラフが親コンテナのサイズに合わせて自動的に調整されます。

var chart = echarts.init(document.getElementById('chart'));

2. サイズ変更イベント リスナーを使用する:

もう 1 つの方法は、サイズ変更イベント リスナーを使用して、チャートのサイズを動的に変更することです。ウィンドウ サイズの変更をリッスンすることで、ウィンドウ サイズが変更されたときにチャートの幅と高さをリセットできます。

var chart = echarts.init(document.getElementById('chart'));
window.addEventListener('resize', function() {
chart.resize();
});

こうすることで、ウィンドウ サイズが変更されると、新しいウィンドウ サイズに合わせてグラフのサイズが自動的に変更されます。

3. CSS メディア クエリを使用する:

CSS メディア クエリを使用して、さまざまな画面サイズに応じてグラフの幅と高さを設定できます。 CSS でさまざまなスタイル ルールを定義することで、画面の幅と高さに応じてグラフ コンテナのサイズを変更できます。

<style>
   @media (max-width: 768px) {
     #chart {
       width: 100%;
       height: 300px;
     }
   }
   @media (min-width: 768px) {
     #chart {
       width: 100%;
       height: 500px;
     }
   }
   </style>
   <div id="chart"></div>

このように、画面幅が 768px 未満の場合、グラフ コンテナの高さは 300px になり、画面幅が 768px より大きい場合、グラフ コンテナの高さは 300px になります。 768px 以上の場合、グラフ コンテナの高さは 500px になります。

上記は、ECharts チャートの適応サイズを設定するために一般的に使用されるいくつかの方法です。特定のニーズとシナリオに応じて、チャートの適応を実装する適切な方法を選択できます。パーセントを使用してコンテナ サイズを設定するか、サイズ変更イベント リスナーを使用するか、CSS メディア クエリを使用するかにかかわらず、開発者はさまざまなデバイスや画面サイズに適応するグラフを作成できます。 。

以上がechart の適応サイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。