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

svgmap全国地图数据分布统计

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

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

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

svgmap全国地图数据分布统计
分类:统计图 > 地图 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 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