svgmap +php全国地图数据分布统计

4134
<style>
  .progress {
     border-radius:0;
     -webkit-box-shadow:none;
     box-shadow:none;
     background:#dadada;
     height:20px;
     margin-bottom: 10px;
  }
  .progress .progress-bar {
     -webkit-box-shadow:none;
     box-shadow:none;
     line-height:18px
  }
  .progress[data-percent] {
     position:relative
  }
  .progress[data-percent]:after {
     display:inline-block;
     content:attr(data-percent);
     color:#FFF;
     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     line-height:20px;
     text-align:center;
     font-size:12px;
     font-family:Verdana
  }
  .progress.progress-yellow[data-percent]:after {
     color:#963
  }
  .progress.progress-small {
     height:12px
  }
  .progress.progress-small .progress-bar {
     line-height:10px;
     font-size:11px
  }
  .progress.progress-small[data-percent]:after {
     line-height:10px;
     font-size:11px
  }
  .progress.progress-mini {
     height:9px
  }
  .progress.progress-mini .progress-bar {
     line-height:8px;
     font-size:11px
  }
  .progress.progress-mini[data-percent]:after {
     line-height:8px;
     font-size:11px
  }
  .progress-bar {
     background-color:#2a91d8
  }
  .map_deep{text-align: center;}
  .progress-bar {
     background-color: #428bca;
     color: #fff;
     float: left;
     font-size: 12px;
     height: 100%;
     text-align: center;
     transition: width 0.6s ease 0s;
     width: 0;
  }
</style>
<div id="Region" style="position:relative; height:500px;width:850px;margin:0 auto" class="clearfix">
  <div class="maps_area clearfix" id="maps_area" style="float:left;">
     <div class="regionMap" id="RegionMap" style="margin:30px 0 0"></div>
     <div class="map_deep"><img src="__JS__/svgmaps/images/map_color.gif"/></div>
  </div>
  <div class="regionList" id="MapControl" style="margin:20px 0 0 50px;float:left;width:350px">
     {volist name="maps" id="v"}
     <div  {if condition="$key neq 'other'"}class='item'{/if}>
     <div class="bars clearfix" style="margin:0 0 10px">
        <div class="col-sm-9" style="float: left;width:250px">
           <div class="progress" data-percent="{$v['value']}" >
              <div class="progress-bar" style="width:{$v['value']};background-color:#{$v['color']}"></div>
           </div>
        </div>
        <div class="col-sm-3 province_name" style="float: left;width:80px;margin:0 0 0 15px" data-code="{$key}" data-percent="{$v['value']}">{$v['name']}</div>
     </div>
  </div>
  {/volist}
</div>
<script type="text/javascript" src="__JS__/svgmaps/svgmap/lib/raphael-min.js"></script>
<script type="text/javascript" src="__JS__/svgmaps/svgmap/res/chinaMapConfig.js"></script>
<script type="text/javascript" src="__JS__/svgmaps/svgmap/map.js"></script>

$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' => '澳门', //澳门
);

$provinces = [];
foreach ($province_config as $key=>$v){
   $provinces[$key]['province'] = $v;
   $provinces[$key]['qty'] = Db::name("user_info")->where(['address'=>['like',"%".$v."%"]])->count();
}

$maps = array();
$i = 0;
$total = 0;
foreach ($provinces as $k => $v) {
   $total += $v['qty'];
   if ($v['province'] == '其他') {
       $province_other = $v;
       unset($provinces[$k]);
   }
   if ($v['qty'] > 0) {
       foreach ($province_config as $k2 => $v2) {
           if ($v['province'] == $v2) {
               $maps[$k2] = array("name" => $v['province'], "value" => $v['qty'], "stateInitColor" => $i, "index" => $i + 1);
               $i++;
           }
       }
   }
}
$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"
   );
}
$this->assign("maps",$maps);
$this->assign("maps_json",$maps ? json_encode($maps) : "");
$this->assign("colors_json",json_encode($maps_colors));

用于书信网站

<script type="text/javascript">
    var maps_json = '{$maps_json}';
    if (maps_json == '') {
    } else {
        var data = eval("(" + maps_json + ")");
        var colors_json = '{$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;
            }
        });
    }
    $('#MapControl .item').hover(function() {
        var code = $(this).find(".province_name").attr("data-code");
        var name = $(this).find(".province_name").text();
        var percent = $(this).find(".province_name").attr("data-percent");
        var index = $(this).index() + 1;
        var active = index < 4 ? 'active' : '';
        var thisHtml = '<div class="mapInfo"><i class="' + active + '">' + index + '</i><span>' + name + '</span><b>' + percent + '</b></div>';
        //        console.log(code);
        $('body').append('<div id="map_tip"></div');
        $('#map_tip').css({
            left: $(mapObj_1[code].node).offset().left - 50,
            top: $(mapObj_1[code].node).offset().top - 40
        }).html(thisHtml).show();
        mapObj_1[code].attr({
            fill: '#E99A4D'
        });
    }, function() {
        var code = $(this).find(".province_name").attr("data-code");
        $('#map_tip').remove();
        mapObj_1[code].attr({
            fill: "#" + stateColorList[data[code].stateInitColor]
        });
    });
</script>