echart——ip地区分布地图

最新推荐文章于 2024-05-14 19:30:07 发布

LostYouth1993

最新推荐文章于 2024-05-14 19:30:07 发布

阅读量2.6k

点赞数

分类专栏： web开发文章标签： echarts php 地图

本文链接：https://blog.csdn.net/LostYouth1993/article/details/74331383

版权

web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用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>

LostYouth1993

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echart——ip地区分布地图

利用Echart插件，实现用户IP自动绘制用户地区分布情况。1、php解析ip数据从mysql表取用户ip，调用新浪IP地址库解析得到对应地区，存到php数组：格式：array("江苏"=>"15","上海"=>"18")，表示用户在江苏分布数量为15。<?phpheader("Content-type=text/json;charset=UTF8");$conn = @
复制链接

扫一扫