<%--
  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>
    $(function(){

        $.ajax({
            url:"/getProvinceAddEcharts.action",
            type:"post",
            async : false,
            data:{},
            dataType:"json",
            success:function(data){
                if (data) {
                    var d = data;
                    console.log(d.processorTime);
                    console.log(d.memoryAvailableMBytes);
                    cpu=m.processorTime;
                    memory=m.memoryAvailableMBytes;

                }

            }

        });

    });

    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 geoCoordMap = {};
    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);
</script>
</body>
</html>

