ホームページ > 記事 > ウェブフロントエンド > マップ ヒート マップを使用して ECharts で都市の熱を表示する方法
マップ ヒート マップを使用して ECharts で都市の熱を表示する方法
- WBOYオリジナル
- 2023-12-18 16:00:381264ブラウズ
マップ ヒート マップを使用して 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 サイトの他の関連記事を参照してください。