svgmap全国地图数据分布统计

svgmap全国地图数据分布统计

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

淘建站为您提供更多_统计图_地图_地图_省市,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 430 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:统计图 > 地图 难易程度:中级

中国省市配置

$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;
    }
});

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/900.html
svgmap全国地图数据分布统计 希望对你有帮助,感谢您的支持!
  • 百度地图api开发企业详细地址地图代码

    百度地图api开发企业详细地址地图代码

  • html5 canvas山东省地图分布颜色标记

    html5 canvas山东省地图分布颜色标记

  • html5 echarts图表插件炫光的分布地图动画特效

    html5 echarts图表插件炫光的分布地图动画特效

  • html5地图交互式显示坐标地址信息

    html5地图交互式显示坐标地址信息

  • html5 echarts中国地图网络销售分布图表代码

    html5 echarts中国地图网络销售分布图表代码

  • jQuery中国省市区城市选择三级联动插件

    jQuery中国省市区城市选择三级联动插件

  • html5 svg制作交互式3D商场地图特效

    html5 svg制作交互式3D商场地图特效

  • js地图插件LBS移动地图点餐系统代码

    js地图插件LBS移动地图点餐系统代码

  • jQuery鼠标经过地图城市标注显示详细信息

    jQuery鼠标经过地图城市标注显示详细信息

  • jQuery中国地图插件

    jQuery中国地图插件

  • html5 SVG自定义中国地图

    html5 SVG自定义中国地图

  • 纯css3地图位置标记动态效果

    纯css3地图位置标记动态效果

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2