BUAA_DataVisual_Assignment_Project/index.html at main · Hygebra/BUAA_DataVisual_Assignment_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北京市2017年2月-4月骚扰短信时空域分析</title>
    <!-- <script src="d3.min.js"></script> -->
    <script src="d3.min.js"></script>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .demo-title {
            position: absolute;
            top: 25px;
            left: 25px;
            z-index: 1;
        }

        h1 {
            font-size: 26px;
            margin: 0;
            color: rgb(255, 255, 255);
        }

        h2 {
            font-size: 22px;
            margin: 0;
            color: rgb(255, 255, 255);
        }

        h3 {
            font-size: 16px;
            font-weight: normal;
            margin-top: 5px;
            color: rgb(212, 212, 212);
        }
        .chart {
            position: fixed;      /* 固定在页面某个位置 */
            bottom: 0;            /* 离底部为0 */
            left: 0;              /* 离左侧为0 */
            background-color: transparent;
            color: white;
            padding: 10px;
        }
        .rightChart {
            position: fixed;      /* 固定在页面某个位置 */
            bottom: 0;            /* 离底部为0 */
            right: 0;
            background-color: transparent;
            color: white;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="demo-title">
        <h1>北京市2017年2月-4月骚扰短信时空域分析</h1>
        <h2 type="text" id="calendar" value = "">点击选择显示日期：无</h2>
        <h3>每个圆圈代表一个位置，颜色浓度越浓代表信号越集中</h3>
        <svg id="sample" width="30" height="300"></svg>
        <!-- <h2 value="false">收起</h3> -->
    </div>
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css"> -->
    <link rel="stylesheet" type="text/css" href="calendar/theme_dark.css">

    <!-- <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> -->
    <script src = "calendar/flatpickr"></script>

    <div id="container"></div>
    <script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "cf0e270b9c9d7e052b4d4e6cb66d2736",
    };
    </script>
    <!-- <script type="text/javascript">
    //地图初始化应该在地图容器div已经添加到DOM树之后
    var map = new AMap.Map("container", {
        zoom: 12,
    });
    </script> -->


    <div id="map"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=48133e705f72cc77371b7832867366d3"></script>
    <script type="text/javascript" src="https://webapi.amap.com/loca?v=2.0.0&key=48133e705f72cc77371b7832867366d3"></script>
    <script>
      var map = window.map = new AMap.Map('map', {
          zoom: 11.7,
          zooms: [9, 14],
          center: [116.3912757, 39.906217],
          pitch: 40,
          showLabel: false,
        //   mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
        //   mapStyle: 'amap://styles/212b098c51dfc53a0a99v2b1e147a7b3',
          mapStyle: 'amap://styles/5bf312bd2b4d5e806ca8893e84bd53d5',
          viewMode: '3D',
      });

      var loca = window.loca = new Loca.Container({
          map,
      });
    </script>

    <script src="calendar.js"></script>
    <script src="showDate.js"></script>
    <!-- <script src = "breathPoints.js"></script> -->

    <div class="chart">
        <h2>诈骗短信数量的每日时域分布</h2>

        <!-- <label for="dateSelector">选择日期：</label>
        <select id="dateSelector">
        <option value="overview">总览（按天）</option>
        </select> -->

        <svg id="chart" width="900" height="400"></svg>
<!--
        <script>

        </script> -->
    </div>
    <div class="rightChart">
        <h2>来电号码分布</h2>
        <svg id="rightBottomChart" width="900" height="900"></svg>
    </div>
    <script src = "loadDayPosition.js"></script>
</body>

</html>