echart-ip地域分布地図

Echartプラグインを利用して、ユーザーIPが自動的にユーザー地区の分布状況を描画することを実現する.
1、php解析ipデータ
mysqlテーブルからユーザipを取り、新浪IPアドレスライブラリ解析を呼び出して対応地域を得、php配列に格納する.
フォーマット:array(「江蘇」=>「15」、「上海」=>「18」)は、江蘇省におけるユーザーの分布数が15であることを示している.

"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 '
';
echo $array['  '];
echo '
';
echo $array['  '];

*/
mysql_close($conn);

?>

2、ajaxを利用してjason形式の「ユーザー地区分布」情報を伝達する

        
    
    
    


    

    
    
    
    
        

     









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["  "]} 
            
            ]
        }]
        
        
    });