弹框页面嵌入

主要代码

 <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>&nbsp;&nbsp;企业项目分布图&nbsp;&nbsp;</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>&nbsp;&nbsp;项目数量&nbsp;&nbsp;</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>&nbsp;&nbsp;项目投资&nbsp;&nbsp;</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>