html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地图</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="${rc.contextPath}/view/partyBuildCount/partyBuildMap/js/jquery-1.6.1.min.js" charset="utf-8"></script>
<script src="${rc.contextPath}/plugins/echars/echarts.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/plugins/echars/echarts.js"></script>
<script type="text/javascript" src="${rc.contextPath}/view/partyBuildCount/partyBuildMap/js/bmap.js"></script>
<script type="text/javascript">
CONTEXT_PATH = "${rc.contextPath}";
</script>
<style type="text/css">
body,html{
margin: 0;
padding: 0;
width: 100%;
/*height: 100%;*/
font-size: 13px;
color: #121212;
}
.sys_map{
width: 100%;
height: auto;
overflow: hidden;
box-sizing: border-box;
padding: 5px;
padding-top: 45px;
position: relative;
}
.sys_tit{
height: 35px;
overflow: hidden;
width: 100%;
position: absolute;
left: 5px;
top: 5px;
padding-top: 5px;
}
.sys_tit select{
border: 1px #e2e2e2 solid;
outline: none;
height: 26px;
padding: 0 5px;
}
.sys_item{
width: 100%;
height: auto;
overflow: hidden;
}
.sys_ul{
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.sys_ul li{
margin: 0;
padding: 0;
list-style: none;
width: 25%;
height: 100%;
overflow: hidden;
float: left;
box-sizing: border-box;
padding: 3px;
}
.sys_box{
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
border: 1px #e2e2e2 solid;
position: relative;
padding-top: 31px;
}
.box_tit{
width: 100%;
height: 30px;
overflow: hidden;
background-color: #f2f2f2;
border-bottom: 1px #e2e2e2 solid;
line-height: 30px;
text-indent: 8px;
font-weight: bold;
position: absolute;
left: 0;
top: 0;
}
.box_con{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="sys_map">
<div class="sys_tit">
<span >当前机构：</span>
<select id="selectOrg">
</select>
</div>
<div class="sys_item">
<ul class="sys_ul">
<li style="width: 60%; height: 300px;"><div class="sys_box">
<div class="box_tit">分布图</div>
<div class="box_con" id="partyOrg"></div>
</div></li>
<li style="width: 40%; height: 300px;"><div class="sys_box">
<div class="box_tit">人员数量</div>
<div class="box_con" id="partyMemberNum">图表</div>
</div></li>
</ul>
</div>
<div class="sys_item">
<ul class="sys_ul">
<li style="width: 60%; height: 300px;"><div class="sys_box">
<div class="box_tit">活动分布图</div>
<div class="box_con" id="partyActivity"></div>
</div></li>
<li style="width: 40%; height: 300px;"><div class="sys_box">
<div class="box_tit">年龄分布图</div>
<div class="box_con" id="age"></div>
</div></li>
</ul>
</div>
<div class="sys_item">
<ul class="sys_ul">
<li style="width: 33%; height: 300px;"><div class="sys_box">
<div class="box_tit">民族结构</div>
<div class="box_con" id="nation">图表</div>
</div></li>
<li style="width: 34%; height: 300px;"><div class="sys_box">
<div class="box_tit">男女结构</div>
<div class="box_con" id="sex"></div>
</div></li>
<li style="width: 33%; height: 300px;"><div class="sys_box">
<div class="box_tit">学历结构</div>
<div class="box_con" id="education">图表</div>
</div></li>
</ul>
</div>
</div>
<script type="text/javascript" src="${rc.contextPath}/view/partyBuildCount/partyBuildMap/js/partyBuildMap.js"></script>
</body>
</html>js
$(function(){
initData();
$.ajax({
type : "post",
url : CONTEXT_PATH + '/pbPartyOrg/queryPartyOrgSelectDown',
data : {},
success : function(data){
var result = jQuery.parseJSON(data);
for(var i=0;i<result.length;i++){
$("#selectOrg").append("<option value='"+result[i].pbPartyOrgId+"'>"+result[i].orgName+"</option>");
}
}
});
});
function initData(){
sex();
nation();
partyMebmberNum();
education();
age();
partyOrg();
partyActivity();
$("#selectOrg").change(function() {
debugger;
sex($(this).val());
});
$("#selectOrg").change(function() {
nation($(this).val());
});
$("#selectOrg").change(function() {
age($(this).val());
});
$("#selectOrg").change(function() {
partyMebmberNum($(this).val());
});
$("#selectOrg").change(function() {
education($(this).val());
});
$("#selectOrg").change(function() {
partyActivity($(this).val());
});
}
//男女比例图
function sex(param){
var myChart = echarts.init(document.getElementById('sex'));
$.ajax({
type : "post",
url : CONTEXT_PATH + '/partyCount/sexCount',
data : {"partyId" : param},
success : function(data){
var result = jQuery.parseJSON(data);
var names = ["sexWomens:女性","mens:男性"];
var rlt = {
"data" : []
};
for (var key in result){
for (var i = 0, len = names.length; i < len; i++){
var nItem = names[i], noKey = nItem.split(":")[0], nVal = nItem.split(":")[1];
if(key==noKey){
var obj = {};
obj.value = result[key], obj.name = nVal;
rlt.data.push(obj);
}
}
}
renderPies(rlt);
}
});
function renderPies(_data){
option1 = {
title : {
text: '党员男女结构',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['女性','男性']
},
series : [
{
name: '',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:_data.data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option1);
}
}
//年龄
function age(param){
var myChart = echarts.init(document.getElementById('age'));
$.ajax({
type : "post",
url : CONTEXT_PATH + '/partyCount/ageCount',
data : {"partyId" : param},
success : function(data){
var result = jQuery.parseJSON(data);
renderAge(result);
}
});
function renderAge(_data){
option2 = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['90后', '80后', '70后', '60后', '50后', '49年前生人'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'党员数量',
type:'bar',
barWidth: '60%',
data:_data
}
]
};
myChart.setOption(option2);
}
}
function partyOrg(){
var myChart = echarts.init(document.getElementById('partyOrg'));
var points=[[116.11,39.852],
[116.21,39.952],
[116.31,39.957],
[116.41,39.959],
];
myChart.setOption(option = {
animation: false,
bmap: {
center: [116.408868,39.916706],
zoom: 10,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
// 添加百度地图插件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}
function partyActivity(param){
var myChart = echarts.init(document.getElementById('partyActivity'));
var temp = [];
var points = [];
$.ajax({
type : "post",
url : CONTEXT_PATH + '/Metting/getMettingList',
data : {"hostOrg" : param},
success : function(data){
var result = jQuery.parseJSON(data);
for(var i = 1;i<result.length;i++){
if(result[i].activityLnglat!=null&&result[i].activityLnglat!=""){
temp.push(result[i].activityLnglat);
}
}
for(var i=0;i<temp.length;i++){
var innerPoints = temp[i].split(",");
points.push(innerPoints);
}
renderPartyActivity(points);
}
});
function renderPartyActivity(points){
myChart.setOption(option = {
animation: false,
bmap: {
center: [116.408868,39.916706],
zoom: 10,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
// 添加百度地图插件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}
}