利用Echart插件，實現用戶IP自動繪製用戶地區分佈情況。
1、php解析ip數據
從mysql表取用戶ip，調用新浪IP地址庫解析得到對應地區，存到php數組：
格式：array("江蘇"=>"15","上海"=>"18")，表示用戶在江蘇分佈數量爲15。
<?php
header("Content-type=text/json;charset=UTF8");
$conn = @mysql_connect("127.0.0.1","root","root") or die("無法連接數據庫...");
mysql_query("set names UTF8");
mysql_select_db("identity",$conn);
#query
$resultset = mysql_query('SELECT * FROM ipinfo ');
#mysql_query('delete from province');
$data = array();
class Alteration{
public $ipinfo;
}
while($row = mysql_fetch_array($resultset,MYSQL_ASSOC)) {
$data[] = $row['ip'];
}
function getLocation($ip=''){
//empty($ip) && $ip = getip();
if($ip=="127.0.0.1") return "本機地址";
$api = "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=$ip";
$json = @file_get_contents($api);//調用新浪IP地址庫
$arr = json_decode($json,true);//解析json
$country = $arr['country']; //取得國家
$province = $arr['province'];//獲取省份
$city = $arr['city']; //取得城市
if((string)$country == "中國"){
$_location=$province; //把ip的省份賦給_location
}else{
$_location = $country;
}
return $_location;
}
//遍歷ip字段得到各自的省份信息，存入city數組
$city = [];
for ($i = 0; $i < count($data); $i++){
$city[$i] = getLocation($data[$i]);
}
$array=[];
//統計每個省份的用戶數量存入array數組，array("江蘇"=>"15","上海"=>"18")
for ($i = 0; $i < count($city); $i++){
if(array_key_exists($city[$i],$array))
{
$array[$city[$i]]+=1;
}
else
{
$array[$city[$i]]=1;
}
}
/*
class dataArr{
public $province;
public $numb;
}
foreach($array as $pro=>$pro_value) {
$alter=new dataArr();
$alter->province= $pro;
$alter->numb= $pro_value;
$data_Pro[]=$alter;
}
*/
echo json_encode($array);
/*輸出用戶量
echo $array['上海'];
echo '<br/>';
echo $array['江蘇'];
echo '<br/>';
echo $array['湖北'];
*/
mysql_close($conn);
?>2、利用ajax傳入jason格式的“用戶地區分佈”信息
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--自適應device-width設備寬度-->
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://127.0.0.1/echarts.js"></script>
<script src="http://127.0.0.1/echarts/china.js"></script>
<script src="http://127.0.0.1/jquery.min.js"></script>
<title>ECharts</title>
<style>
</style>
</head>
<body>
<div id="main" style="height:600px;width:100%;border:1px solid black;"></div>
<script type="text/javascript">
var datas;
function getusers() {
$.ajax({
type:"post",
async:false, //async屬性
url:"http://127.0.0.1/getip/IpInfo.php",
data:{},
dataType:"json",
contentType: "application/x-www-form-urldecoded; charset=utf-8",
success:function(result){
datas=result;
//alert(datas['江蘇']);
},
error:function(errmsg) {
alert("Ajax獲取數據錯誤"+errmsg);
}
});
}
getusers();
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
title:{
text:'交易終端用戶地區分佈',
subtext:'2017/07/03',
left:'center',
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默認爲數值文本
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'top',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [{
name: '用戶分佈',
type: 'map',
map: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '上海',value: datas["上海"]},
{name: '北京',value: datas["北京市"]},
{name: '天津',value: datas["天津市"]},
{name: '上海',value: datas["上海市"]},
{name: '重慶',value: datas["重慶市"]},
{name: '河北',value: datas["河北"]},
{name: '河南',value: datas["河南"]},
{name: '雲南',value: datas["雲南"]},
{name: '遼寧',value: datas["遼寧"]},
{name: '黑龍江',value: datas["黑龍江"]},
{name: '湖南',value: datas["湖南"]},
{name: '安徽',value: datas["安徽"]},
{name: '山東',value: datas["山東"]},
{name: '新疆',value: datas["新疆"]},
{name: '江蘇',value: datas["江蘇"]},
{name: '浙江',value: datas["浙江"]},
{name: '江西',value: datas["江西"]},
{name: '湖北',value: datas["湖北"]},
{name: '廣西',value: datas["廣西"]},
{name: '甘肅',value: datas["甘肅"]},
{name: '山西',value: datas["山西"]},
{name: '內蒙古',value: datas["內蒙古"]},
{name: '陝西',value: datas["陝西"]},
{name: '吉林',value: datas["吉林"]},
{name: '福建',value: datas["福建"]},
{name: '貴州',value: datas["貴州"]},
{name: '廣東',value: datas["廣東"]},
{name: '青海',value: datas["青海"]},
{name: '西藏',value: datas["西藏"]},
{name: '四川',value: datas["四川"]},
{name: '寧夏',value: datas["寧夏"]},
{name: '海南',value: datas["海南"]},
{name: '臺灣',value: datas["臺灣"]},
{name: '香港',value: datas["香港"]},
{name: '澳門',value: datas["澳門"]}
]
}]
});
</script>
</body>