<%--
  Created by IntelliJ IDEA.
  User: ZJW
  Date: 2019/7/15
  Time: 23:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/echarts.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/china.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GBv1nHN2KWLFdYyuOKDI8ZuvWs7vboRy&__ec_v__=20190126"></script>

    <style>
        .nextbar{
            position: relative;
            top: -20px;
        }
        .mapmin{
            position: relative;
            left: 150px;
        }
    </style>
    <script src="bootstrap/js/jquery-3.3.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/echarts.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/china.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GBv1nHN2KWLFdYyuOKDI8ZuvWs7vboRy&__ec_v__=20190126"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <a href="/Homepage.action" class="navbar-brand">
                        <span class="text-warning">MusicOL©--24®</span>
                    </a>
                </div>

                <div class="collaspe navbar-collapse" id="bs-example-navbar-collaspe-1">
                    <ul class="nav navbar-nav">
                        <li><a href="user.action">用户管理</a></li>
                        <li><a href="indent.action">订单管理</a></li>
                        <%--<li class="active"><a href="admin_list_food.html">菜品管理</a></li>--%>
                        <li><a href="StationAnalysis.action">站长统计</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dpanel-bodyropdown-toggle">
                                <span class="glyphicon glyphicon-user"></span>&nbsp;${adminName}
                                <strong class="caret"></strong>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="logOut.action">退出登錄</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div><!--ending 1st row-->
    <div class="row nextbar">
        <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
                <%--<div class="navbar-header">--%>
                <%--<a href="/Homepage.action" class="navbar-brand">--%>
                <%--<span class="text-warning">MusicOL©--24®</span>--%>
                <%--</a>--%>
                <%--</div>--%>

                <div class="collaspe navbar-collapse" id="bs-example-navbar-collaspe-2">
                    <ul class="nav navbar-nav">
                        <li><a href="StationAnalysis.action">概要</a></li>
                        <li><a href="mapEcharts.action">地图数据</a></li>
                        <li><a href="#">。。。</a></li>
                    </ul>
                    <%--<ul class="nav navbar-nav navbar-right">--%>
                    <%--<li class="dropdown">--%>
                    <%--<a href="#" data-toggle="dropdown" class="dpanel-bodyropdown-toggle">--%>
                    <%--<span class="glyphicon glyphicon-user"></span>&nbsp;${adminName}--%>
                    <%--<strong class="caret"></strong>--%>
                    <%--</a>--%>
                    <%--<ul class="dropdown-menu">--%>
                    <%--<li><a href="logOut.action">退出登錄</a></li>--%>
                    <%--</ul>--%>
                    <%--</li>--%>
                    <%--</ul>--%>
                </div>
            </nav>
        </div>
    </div><!--ending 2ed row-->




    <div class="row">
        <div class="mapmin" id="mapmain" style="border: 1px solid gray;width: 1600px;height:800px;"></div>
    </div>

</div>



<!-- <button onclick="reloadCPU()">Refresh</button> -->
<script>

    reloadMap = function(){

        $.ajax({
            url:"/getProvinceAddEcharts.action",
            type:"post",
            async : false,
            data:{},
            dataType:"json",
            success:function(da){
                // if (data) {

                    console.log(da.f);
                    console.log(da.s);



                            var myChart = echarts.init(document.getElementById('mapmain'));
                            // 秋雁南飞：
                            // 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
                            // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
                            // 当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
                            // http://echarts.baidu.com/option.html#series-map.geoIndex
                            // 并且加了pin气泡图标以示数值大小
                            // // 全局变量区:参考江西绿色金融（谢谢：本来想用闭包实现接口数据调用，没时间了）

                            // 本图作者：参考秋雁南飞的《投票统计》一图，网址：http://gallery.echartsjs.com/editor.html?c=xrJU-aE-LG
                            var name_title = "全国访问本站数据统计"
                            var subname = '数据爬取自阿里云\n，\nPC、Phone来源人数'
                            var nameColor = " rgb(55, 75, 113)"
                            var name_fontFamily = '等线'
                            var subname_fontSize = 15
                            var name_fontSize = 18
                            var mapName = 'china'
                            // var data = [
                            //     {name:"北京",value:177},
                            //     {name:"天津",value:42},
                            //     {name:"河北",value:102},
                            //     {name:"山西",value:81},
                            //     {name:"内蒙古",value:47},
                            //     {name:"辽宁",value:67},
                            //     {name:"吉林",value:82},
                            //     {name:"黑龙江",value:66},
                            //     {name:"上海",value:24},
                            //     {name:"江苏",value:92},
                            //     {name:"浙江",value:114},
                            //     {name:"安徽",value:109},
                            //     {name:"福建",value:116},
                            //     {name:"江西",value:91},
                            //     {name:"山东",value:119},
                            //     {name:"河南",value:137},
                            //     {name:"湖北",value:116},
                            //     {name:"湖南",value:114},
                            //     {name:"重庆",value:91},
                            //     {name:"四川",value:125},
                            //     {name:"贵州",value:62},
                            //     {name:"云南",value:83},
                            //     {name:"西藏",value:9},
                            //     {name:"陕西",value:80},
                            //     {name:"甘肃",value:56},
                            //     {name:"青海",value:10},
                            //     {name:"宁夏",value:18},
                            //     {name:"新疆",value:67},
                            //     {name:"广东",value:123},
                            //     {name:"广西",value:59},
                            //     {name:"海南",value:14},
                            // ];
                            var data = da.f;


                            var geoCoordMap = {};
                            var toolTipData = da.s ;
                            // var toolTipData = [
                            //     {name:"北京",value:[{name:"PC",value:95},{name:"Phone",value:82}]},
                            //     {name:"天津",value:[{name:"PC",value:22},{name:"Phone",value:20}]},
                            //     {name:"河北",value:[{name:"PC",value:60},{name:"Phone",value:42}]},
                            //     {name:"山西",value:[{name:"PC",value:40},{name:"Phone",value:41}]},
                            //     {name:"内蒙古",value:[{name:"PC",value:23},{name:"Phone",value:24}]},
                            //     {name:"辽宁",value:[{name:"PC",value:39},{name:"Phone",value:28}]},
                            //     {name:"吉林",value:[{name:"PC",value:41},{name:"Phone",value:41}]},
                            //     {name:"黑龙江",value:[{name:"PC",value:35},{name:"Phone",value:31}]},
                            //     {name:"上海",value:[{name:"PC",value:12},{name:"Phone",value:12}]},
                            //     {name:"江苏",value:[{name:"PC",value:47},{name:"Phone",value:45}]},
                            //     {name:"浙江",value:[{name:"PC",value:57},{name:"Phone",value:57}]},
                            //     {name:"安徽",value:[{name:"PC",value:57},{name:"Phone",value:52}]},
                            //     {name:"福建",value:[{name:"PC",value:59},{name:"Phone",value:57}]},
                            //     {name:"江西",value:[{name:"PC",value:49},{name:"Phone",value:42}]},
                            //     {name:"山东",value:[{name:"PC",value:67},{name:"Phone",value:52}]},
                            //     {name:"河南",value:[{name:"PC",value:69},{name:"Phone",value:68}]},
                            //     {name:"湖北",value:[{name:"PC",value:60},{name:"Phone",value:56}]},
                            //     {name:"湖南",value:[{name:"PC",value:62},{name:"Phone",value:52}]},
                            //     {name:"重庆",value:[{name:"PC",value:47},{name:"Phone",value:44}]},
                            //     {name:"四川",value:[{name:"PC",value:65},{name:"Phone",value:60}]},
                            //     {name:"贵州",value:[{name:"PC",value:32},{name:"Phone",value:30}]},
                            //     {name:"云南",value:[{name:"PC",value:42},{name:"Phone",value:41}]},
                            //     {name:"西藏",value:[{name:"PC",value:5},{name:"Phone",value:4}]},
                            //     {name:"陕西",value:[{name:"PC",value:38},{name:"Phone",value:42}]},
                            //     {name:"甘肃",value:[{name:"PC",value:28},{name:"Phone",value:28}]},
                            //     {name:"青海",value:[{name:"PC",value:5},{name:"Phone",value:5}]},
                            //     {name:"宁夏",value:[{name:"PC",value:10},{name:"Phone",value:8}]},
                            //     {name:"新疆",value:[{name:"PC",value:36},{name:"Phone",value:31}]},
                            //     {name:"广东",value:[{name:"PC",value:63},{name:"Phone",value:60}]},
                            //     {name:"广西",value:[{name:"PC",value:29},{name:"Phone",value:30}]},
                            //     {name:"海南",value:[{name:"PC",value:8},{name:"Phone",value:6}]},
                            // ];

                            /*获取地图数据*/
                            myChart.showLoading();
                            var mapFeatures = echarts.getMap(mapName).geoJson.features;
                            myChart.hideLoading();
                            mapFeatures.forEach(function(v) {
                                // 地区名称
                                var name = v.properties.name;
                                // 地区经纬度
                                geoCoordMap[name] = v.properties.cp;

                            });
                            //
                            // console.log(data)
                            // console.log(toolTipData)
                            var max = 480,
                                min = 9; // todo
                            var maxSize4Pin = 100,
                                minSize4Pin = 20;

                            var convertData = function(data) {
                                var res = [];
                                for (var i = 0; i < data.length; i++) {
                                    var geoCoord = geoCoordMap[data[i].name];
                                    if (geoCoord) {
                                        res.push({
                                            name: data[i].name,
                                            value: geoCoord.concat(data[i].value),
                                        });
                                    }
                                }
                                return res;
                            };
                            option = {
                                title: {
                                    text: name_title,
                                    subtext: subname,
                                    x: 'center',
                                    textStyle: {
                                        color: nameColor,
                                        fontFamily: name_fontFamily,
                                        fontSize: name_fontSize
                                    },
                                    subtextStyle:{
                                        fontSize:subname_fontSize,
                                        fontFamily:name_fontFamily
                                    }
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: function(params) {
                                        if (typeof(params.value)[2] == "undefined") {
                                            var toolTiphtml = ''
                                            for(var i = 0;i<toolTipData.length;i++){
                                                if(params.name==toolTipData[i].name){
                                                    toolTiphtml += toolTipData[i].name+':<br>'
                                                    for(var j = 0;j<toolTipData[i].value.length;j++){
                                                        toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                                                    }
                                                }
                                            }
                                            console.log(toolTiphtml)
                                            // console.log(convertData(data))
                                            return toolTiphtml;
                                        } else {
                                            var toolTiphtml = ''
                                            for(var i = 0;i<toolTipData.length;i++){
                                                if(params.name==toolTipData[i].name){
                                                    toolTiphtml += toolTipData[i].name+':<br>'
                                                    for(var j = 0;j<toolTipData[i].value.length;j++){
                                                        toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                                                    }
                                                }
                                            }
                                            console.log(toolTiphtml)
                                            // console.log(convertData(data))
                                            return toolTiphtml;
                                        }
                                    }
                                },
                                // legend: {
                                //     orient: 'vertical',
                                //     y: 'bottom',
                                //     x: 'right',
                                //     data: ['credit_pm2.5'],
                                //     textStyle: {
                                //         color: '#fff'
                                //     }
                                // },
                                visualMap: {
                                    show: true,
                                    min: 0,
                                    max: 200,   //SELECT SUM(num) FROM `province`
                                    left: 'left',
                                    top: 'bottom',
                                    text: ['高', '低'], // 文本，默认为数值文本
                                    calculable: true,
                                    seriesIndex: [1],
                                    inRange: {
                                        // color: ['#3B5077', '#031525'] // 蓝黑
                                        // color: ['#ffc0cb', '#800080'] // 红紫
                                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                                        // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                                        // color: ['#23074d', '#cc5333'] // 紫红
                                        color: ['#00467F', '#A5CC82'] // 蓝绿
                                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                                        // color: ['#00467F', '#A5CC82'] // 蓝绿

                                    }
                                },
                                /*工具按钮组*/
                                toolbox: {
                                    show: true,
                                    orient: 'vertical',
                                    left: 'right',
                                    top: 'center',
                                    feature: {
                                        dataView: {
                                            readOnly: false
                                        },
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                geo: {
                                    show: true,
                                    map: mapName,
                                    label: {
                                        normal: {
                                            show: false
                                        },
                                        emphasis: {
                                            show: false,
                                        }
                                    },
                                    roam: true,
                                    itemStyle: {
                                        normal: {
                                            areaColor: '#031525',
                                            borderColor: '#3B5077',
                                        },
                                        emphasis: {
                                            areaColor: '#2B91B7',
                                        }
                                    }
                                },
                                series: [{
                                    name: '散点',
                                    type: 'scatter',
                                    coordinateSystem: 'geo',
                                    data: convertData(data),
                                    symbolSize: function(val) {
                                        return val[2] / 10;
                                    },
                                    label: {
                                        normal: {
                                            formatter: '{b}',
                                            position: 'right',
                                            show: true
                                        },
                                        emphasis: {
                                            show: true
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#05C3F9'
                                        }
                                    }
                                },
                                    {
                                        type: 'map',
                                        map: mapName,
                                        geoIndex: 0,
                                        aspectScale: 0.75, //长宽比
                                        showLegendSymbol: false, // 存在legend时显示
                                        label: {
                                            normal: {
                                                show: true
                                            },
                                            emphasis: {
                                                show: false,
                                                textStyle: {
                                                    color: '#fff'
                                                }
                                            }
                                        },
                                        roam: true,
                                        itemStyle: {
                                            normal: {
                                                areaColor: '#031525',
                                                borderColor: '#3B5077',
                                            },
                                            emphasis: {
                                                areaColor: '#2B91B7'
                                            }
                                        },
                                        animation: false,
                                        data: data
                                    },
                                    // {
                                    //     name: '点',
                                    //     type: 'scatter',
                                    //     coordinateSystem: 'geo',
                                    //     symbol: 'pin', //气泡
                                    //     symbolSize: function(val) {
                                    //         var a = (maxSize4Pin - minSize4Pin) / (max - min);
                                    //         var b = minSize4Pin - a * min;
                                    //         b = maxSize4Pin - a * max;
                                    //         return a * val[2] + b;
                                    //     },
                                    //     label: {
                                    //         normal: {
                                    //             show: true,
                                    //             textStyle: {
                                    //                 color: '#fff',
                                    //                 fontSize: 9,
                                    //             }
                                    //         }
                                    //     },
                                    //     itemStyle: {
                                    //         normal: {
                                    //             color: '#F62157', //标志颜色
                                    //         }
                                    //     },
                                    //     zlevel: 6,
                                    //     data: convertData(data),
                                    // },
                                    // {
                                    //     name: 'Top 5',
                                    //     type: 'effectScatter',
                                    //     coordinateSystem: 'geo',
                                    //     data: convertData(data.sort(function(a, b) {
                                    //         return b.value - a.value;
                                    //     }).slice(0, 5)),
                                    //     symbolSize: function(val) {
                                    //         return val[2] / 10;
                                    //     },
                                    //     showEffectOn: 'render',
                                    //     rippleEffect: {
                                    //         brushType: 'stroke'
                                    //     },
                                    //     hoverAnimation: true,
                                    //     label: {
                                    //         normal: {
                                    //             formatter: '{b}',
                                    //             position: 'right',
                                    //             show: true
                                    //         }
                                    //     },
                                    //     itemStyle: {
                                    //         normal: {
                                    //             color: 'yellow',
                                    //             shadowBlur: 10,
                                    //             shadowColor: 'yellow'
                                    //         }
                                    //     },
                                    //     zlevel: 1
                                    // },

                                ]
                            };
                            myChart.setOption(option);


            }

        });
        // console.log(d);
    };

    setInterval("reloadMap()",5000);
</script>
</body>
</html>

