头像

svgmap全国地图数据分布统计

来源:http://www.sucaihuo.com/js/900.html 素材火管理员 2016-07-19 07:36浏览(2060) 收藏

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

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 14 下载资源 下载积分: 127 积分

中国省市配置

$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;
    }
});
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/900.html
评论68
头像

友情提示:垃圾评论一律封号...

  • 头像 67楼
    02-22 23:30
    k134563
    真的好厉害
  • 头像 66楼
    01-16 14:33
    anylee
    代码和界面都很赞,牛
  • 头像 65楼
    01-07 15:23
    a809704431
    牛逼的技术员啊
  • 头像 64楼
    12-31 15:13
    lllll
    牛逼真的好厉害啊
  • 头像 63楼
    12-30 16:21
    wrong
    功能强大,正好可以下来用用呀。。
  • 头像 62楼
    12-29 17:12
    xiaohuihui123
    功能强大,正好可以下来用用呀。。。
  • 头像 61楼
    12-27 15:12
    yql123
    相当的可以啊,非常受用啊
  • 头像 60楼
    12-25 10:32
    147369a
    很好的功能啊啊 收藏了啊.
  • 头像 59楼
    12-06 12:10
    liyn2007
    强大,分析图用的上
  • 头像 58楼
    11-20 12:52
    1122233
    这么强大啊
1 2