マップヒートマップを使用して ECharts で都市の熱を表示する方法-jsチュートリアル-php.cn

マップヒートマップを使用して ECharts で都市の熱を表示する方法

WBOY

リリース： 2023-12-18 16:00:38

オリジナル

1301 人が閲覧しました

マップヒートマップを使用して ECharts で都市の熱を表示する方法

ECharts は、開発者が使用できる、ヒートマップなどのさまざまな種類のチャートを提供する強力なビジュアルチャートライブラリです。マップヒートマップを使用すると、都市や地域の人気を示すことができ、さまざまな場所の人気や密度を迅速に把握するのに役立ちます。この記事では、ECharts でマップヒートマップを使用して都市の熱を表示する方法を紹介し、参考となるコード例を示します。

まず、地理情報を含むマップファイルが必要です。ECharts は公式にさまざまなマップファイルを提供しており、必要に応じて適切なマップファイルを選択できます。中国の地図を例に挙げると、中国地図の JSON ファイルは ECharts 公式 Web サイト (https://echarts.apache.org/zh/download-map.html) で見つけることができます。ファイルをダウンロードし、プロジェクト内の適切な場所に配置します。

次に、表示データを準備する必要があります。中国のさまざまな都市の人気度を表示したいとします。都市名と人気度の値を含むデータコレクションを使用できます。たとえば、JSON 配列を使用してこのデータを保存できます。以下に示すように、各配列要素には都市名と対応する熱量が含まれます:

var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 90},
    {name: '广州', value: 80},
    // 其他城市数据...
];

ログイン後にコピー

次に、マップを含む ECharts インスタンスを作成する必要があります。ヒートマップを作成し、データをマップファイルに関連付けます。以下は、マップヒートマップを作成するためのサンプルコードです。

// 创建ECharts实例
var myChart = echarts.init(document.getElementById('mapContainer'));

// 配置地图热力图
var option = {
    // 使用中国地图
    map: 'china',
    // 设置地图的放大与缩小的按钮不可见
    roam: false,
    // 配置地图热力图的数据
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: data
    }]
};

// 关联数据与地图文件
myChart.setOption(option);

ログイン後にコピー

上記のサンプルコードでは、最初に ECharts インスタンスを作成し、それが配置されているコンテナーを指定します。次に、マップヒートマップの関連パラメーターを構成しました。このうち、mapは使用するマップファイルを指定し、roamはマップズームボタンの可視性を設定し、seriesはヒートマップのデータと使用する座標を指定します。ネクタイ。最後に、setOption メソッドを使用してデータをマップファイルに関連付けます。

このマップヒートマップを表示する HTML コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图热力图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="mapContainer" style="width: 800px; height: 600px;"></div>
    <script>
        // 上述代码
    </script>
</body>
</html>

ログイン後にコピー

上記の HTML コードでは、ECharts の JavaScript ファイルを導入し、マップヒートマップを含むコンテナを作成しました。コンテナーの幅と高さを設定することで、マップヒートマップのサイズを変更できます。

上記の手順により、マップヒートマップを使用して都市の熱を ECharts に表示できます。実際のニーズに応じて、都市の熱量に応じてマップヒートマップの色の濃さを調整し、都市の熱の違いを示すことができます。さらに、ECharts には豊富な構成オプションも用意されており、構成パラメーターを調整することで、よりパーソナライズされたマップヒートマップ効果を実現できます。

要約すると、ECharts のマップヒートマップを使用して都市の熱量を表示するのは、シンプルで効果的な方法です。地図ファイルとデータを適切に準備し、ECharts の構成オプションを組み合わせることで、さまざまな地図ヒートマップを簡単に作成し、都市の熱量を一目で表示できます。この記事で提供されているサンプルコードが役に立ち、ECharts でのマップヒートマップの開発プロセスがスピードアップされることを願っています。

以上がマップヒートマップを使用して ECharts で都市の熱を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。