主要代码
<iframe class="popFrame" name="frame" style="width: 900px;height: 970px;border: none" scrolling="no">
</iframe>
</div>
</div>
<div class="left-map clearfix" style="position: relative">
<div class="more"><a onclick="showPopUpBox('1')" href="${ctx}/projectInfo/statistics" target="frame"><img src="${ctx}/static/images/projectMap/more.png" />更多统计</a></div>
<div class="title">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="{ctx}/static/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="{ctx}/static/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="{ctx}/static/echarts/map/changsha.js" type="text/javascript"></script>
<style>
.industryMap{
height: 1200px;
margin-top: 5px;
}
.left-map{
border: solid 1px rgb(222, 222, 222);
width: 1200px;
height: 700px;
}
.right-list{
margin-left: 10px;
border: none;
width: 540px;
height: 500px;
}
.charts{
position: relative;
width: 49%;
height: 500px;
border:1px solid rgb(222, 222, 222);
float: left;
}
.detailBut{
position: absolute;
width: 60px;
height: 30px;
font-size: 18px;
background-color: #dbeeff;
text-align: center;
line-height: 30px;
font-weight: bold;
right: 20px;
top: 10px;
color: #4296ee;
z-index: 2000;
border-radius: 2px;
}
.more{
position: absolute;
width: 110px;
height: 30px;
font-size: 18px;
background-color: #dbeeff;
text-align: center;
font-weight: bold;
line-height: 30px;
position: absolute;
border-radius: 4px;
right: 20px;
top: 10px;
z-index: 2000;
}
.title{
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
font-weight: bold;
font-size: 24px;
}
.popUpBox{
display: none;
position: absolute;
left: 145px;
top: 2px;
z-index: 5000;
background-color: #fff;
box-shadow: 1px 1px 1px black;
}
.popFrame{
}
.bg{
width: 100%;
height: 1600px;
position: absolute;
z-index: 2500;
display: none;
background-color: rgba(69, 73, 74,0.6);
}
</style>
<div class="bg"></div>
<section class="clearfix industryMap" style="margin-left: 17%;background-color: white;position: relative">
<div class="popUpBox">
<div>
<div class="back"><img src="${ctx}/static/images/projectMap/back.png" onclick="hidePopUpBox()" style="cursor: pointer"></div>
<iframe class="popFrame" name="frame" style="width: 900px;height: 970px;border: none" scrolling="no">
</iframe>
</div>
</div>
<div class="left-map clearfix" style="position: relative">
<div class="more"><a onclick="showPopUpBox('1')" href="${ctx}/projectInfo/statistics" target="frame"><img src="${ctx}/static/images/projectMap/more.png" />更多统计</a></div>
<div class="title">
<img src="${ctx}/static/images/projectMap/left.png">
<span> 企业项目分布图 </span>
<img src="${ctx}/static/images/projectMap/right.png">
</div>
<div id="map" style="width: 1200px;height: 600px">
</div>
</div>
<div class="right-list clearfix" style="width: 1200px;height: 450px;margin-top: 2%">
<div class="charts">
<div class="detailBut" ><a onclick="showPopUpBox('2')" target="frame" href="${ctx}/projectInfo/projectInfoDetails">详情</a></div>
<div class="title">
<img src="${ctx}/static/images/projectMap/left.png">
<span> 项目数量 </span>
<img src="${ctx}/static/images/projectMap/right.png">
</div>
<div id="bar" style="width: 540px;height: 450px">
</div>
</div>
<div class="charts" style="margin-left: 22px;">
<div class="detailBut"><a onclick="showPopUpBox('2')" target="frame" href="${ctx}/projectInfo/projectInfoInvestment">详情</a></div>
<div class="title">
<img src="${ctx}/static/images/projectMap/left.png">
<span> 项目投资 </span>
<img src="${ctx}/static/images/projectMap/right.png">
</div>
<div id="pie" style="width: 540px;height: 450px;margin-top: 10px">
</div>
</div>
</div>
</section>
</body>
</html>
<script>
var map = echarts.init(document.getElementById('map'));
var bar = echarts.init(document.getElementById('bar'));
var pie = echarts.init(document.getElementById('pie'))
var color = ['#4989ff','#00ccd9','#ffa675','#86d94e','#00adfc','#ff838c','#ffe402','#dab2ff','#ac76e0','#627bf1','#8db9dc','#ff6b36','#0accb3','#10d6ed'];
var obj = [
{name: "长沙市", value: "0", id: "430100"},
{name: "株洲市", value: "0", id: "430200"},
{name: "湘潭市", value: "0", id: "430300"},
{name: "衡阳市", value: "0", id: "430400"},
{name: "邵阳市", value: "0", id: "430500"},
{name: "岳阳市", value: "0", id: "430600"},
{name: "常德市", value: "0", id: "430700"},
{name: "张家界市", value: "0", id: "430800"},
{name: "益阳市", value: "0", id: "430900"},
{name: "郴州市", value: "0", id: "431000"},
{name: "永州市", value: "0", id: "431100"},
{name: "怀化市", value: "0", id: "431200"},
{name: "娄底市", value: "0", id: "431300"},
{name: "湘西州", value: "0", id: "433100"}
]
var AreaCompany = {};
//散点在地图上的坐标
var geoCoordMap = {
"国家级基地1": [113.080441,28.721102],
"国家级基地2": [112.436535,28.249703],
"国家级基地3": [112.362946,28.249703],
"省级基地1": [111.019943,29.512736],
"省级基地2": [110.118476,28.510048],
"省级基地3": [111.79263,26.938395],
"市级基地1": [113.503578,26.210494],
"市级基地2": [111.700643,25.828151],
"市级基地3": [111.369492,28.363683]
};
// 将坐标与值对应并反映在地图上
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
// console.log(data[i].value);
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
function isArray(obj){
return (typeof obj=='object')&&obj.constructor==Array;
}
// var color = ['#4989ff','#00ccd9','#ffa675','#86d94e','#00adfc','#ff838c','#ffe402','#dab2ff','#ac76e0','#627bf1','#8db9dc','#ff6b36','#0accb3','#10d6ed'];
var mapOption = {
tooltip : {
trigger: 'item',
formatter:function(params, ticket, callback) {
if(params.data.value==undefined){
return params.data.name;
} else if(!isArray(params.data.value)){
for(var j=0;j<obj.length;j++){
if(obj[j].name==params.data.name){
return params.data.name+ '<br/>'
+ '企业数量：' + obj[j].value;
}
}
/* return params.data.name+ '<br/>'
+ '企业数量：' + params.data.value;*/
}else {
return '公司名称：' + params.data.name + '<br/>'
}
}
},
visualMap: [
{
// type:'piecewise',
right: '5%',
bottom:'3%',
min: 0,
max: 100,
color:['#0082ff','#98cfea'],
/* color:['#3067dc','#59a7c9'], *///右边颜色数量越多 颜色越靠右
text:['高','低'], // 文本，默认为数值文本
splitNumber:0,
show:true, //是否显示地区不同的颜色 根据打点的数量
seriesIndex:'0',
orient:'horizontal'
}
],
toolbox: { //刷新按钮
show: false,
top: '50%',
right: '10%',
top: 'center',
feature: {
restore: {
show:true,//是否显示
title:'刷新',
iconStyle:{
textAlign:'left'
}
}
}
},
geo: {
map: '长沙',
roam:true,
zoom:1,//缩放级别
label: {
emphasis: {
show: true
}
},
itemStyle: {
normal: {
show:false,
areaColor: 'rgba(255,255,255,0.89)',
borderColor: '#fff'
},
mapLocation: {//显示子地图的位置及其大小
/*x: 'right',
y: 'top',
width: '50%'*/
y: '10%'
},
emphasis: { // 高亮状态
label: {
show: false // 去除鼠标移到地图上，地图上显示国家名的效果
},
/* areaColor: '#7d7d7d'*/
}
}
},
series : [
{
/* geoIndex: 0,//解决在地图上缩放重影问题*/
name: '企业数量',
type: 'map',
mapType: '长沙',
itemStyle:{
normal:{
label:{show:true}
},
emphasis:{
label:{show:true,color:'#e50404'},
itemStyle: {
areaColor: '#fff',
color: 'red'}
}
},
emphasis:{
itemStyle: {
areaColor: '#fff',
color: 'red',
emphasis: { // 高亮状态
label: {
show: false // 去除鼠标移到地图上，地图上显示国家名的效果
}
//areaColor: '#7d7d7d'
}
}
},
mapLocation: {
y: '10%'
},
roam: true,
data:obj, //展示地图的企业个数
},
{
name:'百亿以上',
type: 'effectScatter',
coordinateSystem: 'geo',
data: []/*convertData([ //展示的坐标
{name: "国家级基地1", value: 400},
{name: "国家级基地2", value: 400},
{name: "国家级基地3", value: 410},
{name: "省级基地1", value: 260},
{name: "省级基地2", value: 270},
{name: "省级基地3", value: 280},
{name: "市级基地1", value: 100},
{name: "市级基地2", value: 100},
{name: "市级基地3", value: 100}
])*/,
symbolSize: 4,
label: {
normal: {
show: false,
color: '#e3bf4c'
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#f17e18'
/* color:['#e3bf4c','#e50404'],*/
/* color: '#d50d0d'*/
},
emphasis: {
borderColor: '#d50d0d',
borderWidth: 1
}
}
},
]
};
var barOption = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
top:'25',
data: [ '国家', '省', '市','区']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '国家',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '省',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '市',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '区',
type: 'bar',
stack: '广告',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
]
};
var pieOption = {
tooltip: {
trigger: 'item',
// formatter:function (data) {
// return data.data.name+':'+data.data.value+'万元 '+data.data.num+'个'
// },
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '项目资金',
type: 'pie',
radius: ['10%', '40%'],
avoidLabelOverlap: false,
label: {
normal:{
show:true,
formatter:function (data) {
return data.data.name+':'+data.data.value+'万元 '+data.data.num+'个'
}
}
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
]
};
(function(){
loadData(); //初始化数据
})();
function loadData() {
$.ajax({
url:'${ctx}//projectInfomationMap/queryDataForMap',
data:{
},
dataType:'json',
type:'post',
success:function(data){
console.log(data);
var mapList = data.map;
var barList = data.bar;
var pieList = data.pie;
var mapData = [];
for ( var i in mapList){
var m = {};
m['name'] = mapList[i]['affiliatedEnterprise'];
// map['projectName'] = mapList[i]['entryName'];
m['value'] = [mapList[i]['lat'],mapList[i]['lon'],0]
mapData.push(m);
}
mapOption.series[1]['data'] = mapData;
map.setOption(mapOption);
var xdata = [];
var ydata1 = [];
var ydata2 = [];
var ydata3 = [];
var ydata4 = [];
for ( var i in barList){
if(barList[i]['TIME']){
xdata.push(barList[i]['TIME']);
ydata1.push(barList[i]['COUNTRY']);
ydata2.push(barList[i]['PROVINCE']);
ydata3.push(barList[i]['CITY']);
ydata4.push(barList[i]['ZONE']);
}
}
barOption.xAxis[0].data = xdata;
barOption.series[0].data = ydata1;
barOption.series[1].data = ydata2;
barOption.series[2].data = ydata3;
barOption.series[3].data = ydata4;
bar.setOption(barOption);
var labelData = [];
var seriesData = [];
for( var i in pieList){
if(pieList[i]['INDUSTRY_NAME']){
var data = {};
data['name'] = pieList[i]['INDUSTRY_NAME'];
data['value'] = pieList[i]['CASH_AMOUNT'].replace(',','');
data['num'] = pieList[i]['COMPANY_NUM'];
seriesData.push(data);
}
}
console.log(seriesData);
pieOption.series[0].data = seriesData;
console.log(pieOption);
pie.setOption(pieOption);
}
})
}
function showPopUpBox(obj) {
if(obj == '1'){
$('.popUpBox').height(970);
$('.popUpBox').width(900);
$('.popFrame').height(970);
$('.popFrame').width(900);
$('.popUpBox').css('left','150px');
}else{
$('.popFrame').height(750);
$('.popFrame').width(1200);
$('.popUpBox').height(750);
$('.popUpBox').width(1200);
$('.popUpBox').css('left','20px');
}
$(".popUpBox").show('slow');
$(".bg").height(1390);
$(".bg").show();
}
function hidePopUpBox(){
$(".popUpBox").hide('fast');
$(".bg").hide();
}
</script>
