<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>中国国际贸易促进委员会原产地证申报系统</title>
</head>
<link href="/resource/front/css/bootstrap.min.css" rel="stylesheet">
<link href="/resource/front/css/style.css" rel="stylesheet">
<link href="/resource/front/css/certificateOfOrigin.css" rel="stylesheet">
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<jsp:include page="header.jsp" />
<div class="row content">
    <div class="col-sm-12 col-md-12 ">
        <!-- <div class="thumbnail"> -->
            <!-- <div class="caption"> -->
                <img src="/resource/front/images/jinchukoumaoyi.png" CLASS="costom_title_img_div" style="width: 100%">
            <!-- </div> -->
        <!-- </div> -->
    </div>
</div>
<div id="mainMap" style="margin-top:20px;height:600px;border:1px solid #ccc;padding:10px;"></div>
<jsp:include page="footer.jsp" />
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script src="/resource/front/echarts.js"></script>
<script src="/resource/front/data.json.js"></script>

<script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '/resource/front/'
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
            [
                'echarts',
                'echarts/chart/map'
            ],
            function (ec) {
                // --- 地图 ---
                var myChart2 = ec.init(document.getElementById('mainMap'));
                var ecConfig = require('echarts/config');
                myChart2.on(ecConfig.EVENT.CLICK, eConsole);
                myChart2.setOption({
                    tooltip : {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    series : [
                        {
                            name: '中国',
                            type: 'map',
                            mapType: 'china',
                            selectedMode : 'single',
                            clickable : true,
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:Mapdata
                        }
                    ]
                });
            }
    );
    function eConsole(param) {
        if (typeof param.seriesIndex == 'undefined') {
            return;
        }
        if (param.type == 'click') {
           window.location.href = '/front/serviceNetWork/'+param.value
        }
    }
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/resource/front/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/resource/front/js/bootstrap.min.js"></script>

<script rel="script" type="text/javascript">
    /**
     * Created by Administrator on 2017/4/21.
     */
    $(document).ready(function(){
        $("#search").click(function(){
            $("#popsearch").slideDown("slow");
        });
        $("#popsearch .gb_btn").click(function(){
            $("#popsearch").slideUp("slow");
        });
    });
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
    </script>
    <script src="/resource/front/js/aside_fade.js"></script>
</body>
</html>