ホームページ > 記事 > ウェブフロントエンド > マップを使用して ECharts にデータを表示する方法
マップを使用して ECharts にデータを表示する方法
- WBOYオリジナル
- 2023-12-18 16:09:341480ブラウズ
マップを使用して ECharts にデータを表示する方法
ECharts は、折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフをサポートする強力なデータ視覚化ツールです。チャートなどその中でも、マップ チャートは ECharts の重要なコンポーネントであり、さまざまな地域のデータ分布を表示するために使用できます。この記事では、ECharts でのマップ関数の使用方法と詳細なコード例を紹介します。
始める前に、次のファイルを準備する必要があります:
- echarts.min.js: ECharts のコア ライブラリ ファイル。
- china.js: ECharts で事前定義された中国地図データ ファイル。中国地図の描画に使用されます。
- データファイル: 独自に用意したJSON形式のデータファイルには地域ごとのデータが含まれています。
まず、必要なファイルを HTML ファイルに記述します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts地图展示数据示例</title>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
</body>
</html>次に、JavaScript ファイルにコードを記述します:
// 创建地图实例
var myChart = echarts.init(document.getElementById('map'));
// 设置地图参数
var option = {
title: {
text: '全国各省份数据分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: false, // 禁止缩放平移
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '北京', value: 500},
{name: '上海', value: 300},
{name: '广东', value: 800},
// 这里填充自己的数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);上記のコードでは、最初に echarts.init メソッドを渡してマップ インスタンスを作成し、それを指定された DOM 要素にバインドします。次に、option パラメーターを設定して、マップのスタイルとデータを構成します。 series では、マップ タイプを map に設定し、マップ データを指定します。
最後に、myChart.setOption(option) を使用して構成アイテムをマップ インスタンスに適用し、マップを表示します。
コードではデータの一部のみを提供していることに注意してください。実際の状況に応じてデータを入力し、関連する構成を調整する必要があります。同時に、china.js ファイル内の地図データを変更することで、他の地域の地図を表示できます。
これまでに、マップを使用して EChart にデータを表示する操作が完了しました。慎重な設定とデータの入力により、より豊かで多様な地図表示効果を実現できます。この記事があなたの学習や実践に役立つことを願っています。
以上がマップを使用して ECharts にデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。