最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

svgmap全国地图数据分布统计

来源:http://www.erdangjiade.com/ 沐浴春风 2016-07-19 07:36浏览(4159)

svgmap地图各个省份数据展示,你可以很简单的应用在ip地区来源统计,比如百度统计。注意:最下方有个高低图片,代表的是数据有多到少。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

svgmap全国地图数据分布统计
分类:统计图 > 地图 难易:中级
查看演示 下载资源 下载积分: 30 积分

中国省市配置

$province_config = array
    'heilongjiang' => '黑龙江'
    'jilin' => '吉林'
    'liaoning' => '辽宁'
    'hebei' => '河北'
    'shandong' => '山东'
    'jiangsu' => '江苏'
    'zhejiang' => '浙江'
    'anhui' => '安徽'
    'henan' => '河南'
    'shanxi' => '山西'
    'shaanxi' => '陕西'
    'gansu' => '甘肃'
    'hubei' => '湖北'
    'jiangxi' => '江西'
    'fujian' => '福建'
    'hunan' => '湖南'
    'guizhou' => '贵州'
    'sichuan' => '四川'
    'yunnan' => '云南'
    'qinghai' => '青海'
    'hainan' => '海南'
    'shanghai' => '上海'
    'chongqing' => '重庆'
    'tianjin' => '天津'
    'beijing' => '北京'
    'ningxia' => '宁夏'
    'neimongol' => '内蒙古'
    'guangxi' => '广西'
    'xinjiang' => '新疆'
    'xizang' => '西藏'
    'guangdong' => '广东'
    'hongkong' => '香港'
    'taiwan' => '台湾'
    'macau' => '澳门'//澳门 
);

统计各个省市访问数据

$maps_colors = array('003399''0058B0''0071E1''1C8DFF''51A8FF''82C0FF''AAD5FF'); 
 
$i = 0
$percent_value = 0
$maps_num = count($maps); 
 
foreach ($maps as $k => $v) { 
    if ($i < $maps_num) { 
        $maps[$k]['color'] = $maps_colors[$i]; 
        $i++; 
    } 
    $percent = twoDecimal(($v['value'] / $total) * 100); 
    $maps[$k]['value'] = $percent . "%"
    $percent_value +=$percent

 
if ($percent_value != 100) { 
    $maps['other'] = array
        "name" => '其他地区'
        "value" => (100 - $percent_value) . "%"
        "stateInitColor" => '7'
        "index" => 8
        "color" => "14c1d0" 
    ); 
}

SVGMAP生成中国地图

var data = eval("(" + maps_json + ")"); 
 
var colors_json = '<?php echo $colors_json; ?>'
 
var mapObj_1 = {}
var stateColorList = eval("(" + colors_json + ")"); 
 
$('#RegionMap').SVGMap({ 
    external: mapObj_1, 
    mapName: 'china'
    mapWidth: 450
    mapHeight: 450
    stateData: data, 
    // stateTipWidth: 118, 
    // stateTipHeight: 47, 
    // stateTipX: 2, 
    // stateTipY: 0, 
    stateTipHtml: function(mapData, obj) { 
        var has = 0
        for (var key in mapData) { 
            if (key == obj.id) { 
                has++; 
            } 
        } 
        var tipStr = "暂无数据"
        if (has > 0{ 
            var _value = mapData[obj.id].value; 
 
            var _idx = mapData[obj.id].index; 
            var active = ''
            _idx < 4 ? active = 'active' : active = ''
            tipStr = '<div class="mapInfo"><i class="' + active + '">' + _idx + '</i><span>' + obj.name + '</span><b>' + _value + '</b></div>'
        } 
        return tipStr; 
    } 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/900.html
评论12
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 11楼
    10-23 07:31
    kkmllj2
    牛啊,学习
  • 头像 10楼
    06-15 02:34
    阿萨德fdfsd
    看起来不错,可以
  • 头像 9楼
    06-11 18:10
    ceostation
    感谢楼主,很好玩。!!!
  • 头像 8楼
    04-07 17:05
    842131096@qq.com
    边上数据有动态就更好了
  • 头像 7楼
    04-19 10:15
    nvovnl
    这个很好玩 用处挺大
  • 头像 6楼
    02-26 08:32
    mnpqlll
    这个很好玩 用处挺大的
  • 头像 5楼
    05-10 12:16
    Doral
    很厉害,值得学习一下
  • 头像 4楼
    11-30 11:28
    钻石王老四
    终于找到这种效果的了
  • 头像 3楼
    11-15 19:10
    68180547
    确实不错,学习一下
  • 头像 板凳
    10-17 10:04
    yunxiaoxue027
    很好,谢谢
1 2