<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>