Die ECharts-Karte wird hauptsächlich zur Visualisierung geografischer Gebietsdaten und zur Anzeige von Datenverteilungsinformationen in verschiedenen Gebieten verwendet. Die offizielle Website von ECharts bietet Kartendaten-Downloads wie China-Karten und Weltkarten. Die Karten können über js-Einführung oder asynchrones Laden von json-Dateien aufgerufen werden.
Effektdemonstration Quellcode-Download
In diesem Artikel wird anhand von Beispielen erläutert, wie Sie mit PHP jQuery MySQL Kartendaten von ECharts asynchron laden. Wir nehmen die Karte von China als Beispiel, um die BIP-Daten jeder Provinz in meinem Land im letzten Jahr (2015) anzuzeigen. Durch die asynchrone Anforderung von PHP werden die Daten in MySQL gelesen und dann auf der Karte angezeigt. Daher erfordert dieser Artikel zusätzlich zu den Frontend-Kenntnissen auch Kenntnisse in Bezug auf PHP und MySQL.
HTML
Platzieren Sie zunächst div#myChart auf der Seite, auf der die Karte geladen werden muss.
<div id="myChart" style="width: 600px;height:400px;"></div> <script src="echarts.min.js"></script>
Laden Sie dann Echarts- und China-Karten-JS-Dateien. Da im Beispiel dieses Artikels das asynchrone Ajax-Laden von Daten verwendet wird, muss die jQuery-Bibliotheksdatei geladen werden.
<script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/jquery.min.js"></script>
Javascript
Im nächsten js-Teil legen Sie zunächst den Inhalt der Echarts-Option fest. Bitte beachten Sie den folgenden Code und die Kommentare.
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); //渲染地图 Dann verwenden wir Ajax() von jQuery, um die Daten asynchron anzufordern.
$.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("请求数据失败!");
}
}); Offensichtlich sehen wir, dass über $.ajax() von jQuery eine Post-Anfrage an mapdata.php gesendet wird, die die Rückgabe von Daten im JSON-Format erfordert. Wenn die Anfrage erfolgreich ist und eine Antwort empfangen wird, werden die Kartendaten erneut gesendet -gerendert.
PHP
Die Aufgabe von mapdata.php besteht darin, die Daten in der MySQL-Datentabelle zu lesen und sie dann an das Frontend zurückzugeben. Der erste Schritt besteht darin, eine Verbindung zur Datenbank herzustellen. Dieser Teil des Codes befindet sich in connect.php. Laden Sie den Quellcode herunter, um ihn anzuzeigen. Dann gibt es noch die SQL-Abfrage, die die Daten in der Tabelle echarts_map liest und sie schließlich im JSON-Format zurückgibt.
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
Schließlich werden die Informationen zur MySQL-Datentabelle bereitgestellt. Zur Dateninformation können Sie den Quellcode herunterladen und den SQL-Code in Ihre MySQL-Datei importieren. Bitte achten Sie darauf, die Datenbankkonfigurationsinformationen von connect.php zu ändern.
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;
