PHP+jQuery+MySQL を使用して ECharts マップ データを非同期でロードする方法 (ソース コードのダウンロードあり)_jquery

ECharts マップは主に地理的エリア データを視覚化し、さまざまなエリアのデータ分布情報を表示するために使用されます。 EChartsの公式サイトでは中国地図や世界地図などの地図データのダウンロードが提供されており、jsの導入やjsonファイルの非同期読み込みによって地図を呼び出すことができます。

効果デモ ソースコードダウンロード

この記事では、PHP+jQuery+MySQL を使用して ECharts 地図データを非同期にロードする方法を例とともに説明します。例として中国の地図を取り上げ、昨年 (2015 年) の私の国の各省の GDP データを示します。 PHP を非同期リクエストすることにより、MySQL 内のデータが読み取られてマップ上に表示されるため、この記事ではフロントエンドの知識に加えて、PHP および MySQL 関連の知識も理解する必要があります。

HTML

まず、マップをロードする必要があるページに div#myChart を配置します。

<div id="myChart" style="width: 600px;height:400px;"></div> 
<script src="echarts.min.js"></script> 

次に、Echarts と中国地図の js ファイルを読み込みます。この記事の例では非同期の ajax 読み込みデータを使用しているため、jQuery ライブラリ ファイルを読み込む必要があります。

<script src="js/echarts.min.js"></script> 
<script src="js/china.js"></script> 
<script src="js/jquery.min.js"></script> 

JavaScript

次の js 部分では、まず Echarts オプションの内容を設定します。次のコードとコメントを参照してください。

option = { 
title : { 
text: '2015年GDP统计数据', 
subtext: '数据来源网络（单位：万亿元）', 
left: 'center' //标题居中 
}, 
tooltip : { //提示工具， 
trigger: 'item', 
formatter: "{a} <br/>{b} : {c}万亿元" 
}, 
visualMap: { //视觉映射组件，可以根据范围调节数据变化 
min: 0, //最小值 
max: 10, //最大值 
left: 'left', //位置 
top: 'bottom', 
orient: 'horizontal', //水平 
text:['高','低'], // 文本，默认为数值文本 
calculable : true //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。 
}, 
toolbox: { //工具栏 
show: true, 
orient : 'vertical', //垂直 
left: 'right', 
top: 'center', 
feature : { 
mark : {show: true}, 
saveAsImage : {show: true} //保存为图片 
} 
}, 
series : [ 
{ 
name: '2015年GDP', 
type: 'map', 
mapType: 'china', //使用中国地图 
roam: false, //是否开启鼠标缩放和平移 
itemStyle:{ 
normal:{label:{show:true}}, 
emphasis:{label:{show:true}} 
}, 
data:[] 
} 
] 
}; 
var myChart = echarts.init(document.getElementById('myChart')); 
myChart.showLoading(); //预加载动画 
myChart.setOption(option); //渲染地图 

次に、jQuery の Ajax() を使用して、データを非同期的にリクエストします。

$.ajax({ 
type: "post", 
async: false, //同步执行 
url: "mapdata.php", 
dataType: "json", //返回数据形式为json 
success: function(result) { 
myChart.hideLoading(); //隐藏加载动画 
myChart.setOption({ //渲染数据 
series: [{ 
// 根据名字对应到相应的系列 
name: '2015年GDP', 
data: result 
}] 
}); 
}, 
error: function() { 
alert("请求数据失败!"); 
} 
}); 

明らかに、投稿リクエストが jQuery の $.ajax() を介して mapdata.php に送信され、リクエストが成功して応答が受信されると、json 形式でデータを返す必要があることがわかります。 -レンダリングされました。

PHP

mapdata.php のタスクは、mysql データ テーブル内のデータを読み取り、それをフロントエンドに返すことです。最初にデータベースに接続します。この部分のコードは connect.php にあります。ソース コードをダウンロードして参照してください。次に、SQL クエリがあり、テーブル echarts_map 内のデータを読み取り、最後にそれを json 形式で返します。

include_once('connect.php'); //连接数据库 
//查询数据 
$sql = "select * from echarts_map"; 
$query = mysql_query($sql); 
while($row=mysql_fetch_array($query)){ 
$arr[] = array( 
'name' => $row['province'], 
'value' => $row['gdp'] 
); 
} 
mysql_close($link); 
echo json_encode($arr); //输出json格式数据 

MySQL

最後に、mysql データ テーブルの構造情報が提供されます。データ情報については、ソース コードをダウンロードして、SQL を mysql にインポートできます。デモンストレーション中に、connect.php のデータベース構成情報を変更することに注意してください。

CREATE TABLE IF NOT EXISTS `echarts_map` ( 
`id` int(10) NOT NULL AUTO_INCREMENT, 
`province` varchar(30) NOT NULL, 
`gdp` decimal(10,2) NOT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;