echarts map+散点图 按条件查询并动态显示结果
echarts map+散点图 按条件查询并动态显示结果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
想法：从后台将数据显示到map上，同时可以根据查询条件进行查询并动态展示数据。
页面代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="css/bootstrap.min.css?v=3.3.6"
th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<form class="form-horizontal m-t" id="FindForm">
<div class="form-group">
<label class="col-sm-1 control-label">查询条件：</label>
<input type="text" class="col-sm-3 laydate-icon layer-date form-control"
id="beginTime" name="beginTime"
placeholder="开始时间"
onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"
style="" readonly="readonly"/>
<input type="text" class="col-sm-3 laydate-icon layer-date form-control"
id="endTime" name="endTime"
placeholder="结束时间"
onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"
style="" readonly="readonly"/>
<button class="btn btn-success" onclick="reLoad()" type="button">查询</button>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>结果展示</h5>
<div class="ibox-tools"></div>
</div>
<div class="ibox-content">
<div style="height:450px" id="echarts-map-chart"></div>
</div>
</div>
</div>
</div>
</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/layer/layer.js"></script>
<script src="/js/echarts.min.js"></script>
<script src="/js/guangdong.js"></script>
<script src="/js/plugins/layer/laydate/laydate.js"></script>
<script src="/js/report.js"></script>
</body>
</html>- 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
注意：
1、其中<script src="/js/guangdong.js"></script>是用于加载地图的js文件，下载地址，需要独立引入
2、<button class="btn btn-success" onclick="reLoad()" type="button">查询</button>查询按钮的类型一定要设置为button类型，没有设置的话，每次ajax取完数据后，刷新页面数据后还会再刷新一次，让你不禁很郁闷。
JS文件
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts-map-chart'));
var maxNum = 2000;
var minNum = 0;
var option = {
backgroundColor: '#404a59',
title: {
text: '结果展示',
subtext: '数据真实，来源准确',
left: 'right',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
//params.value[0]:经度，params.value[1]：纬度，params.value[2]：值
return params.name + ": " + params.value[2];
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['人数'],
textStyle: {
color: '#fff'
}
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
},
}
},
dataRange: {
min: minNum,
max: maxNum,
x: 'left',
y: 'bottom',
color: ['red', 'orange', 'yellow'],
text: ['高', '低'],
calculable: true
},
geo: {
map: '广东',
center: [113.292388, 23.115890],
label: {
emphasis: {
show: false
}
},
zoom: 1.5,
roam: true,
mapStyle: {
styleJson: [{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "boundary",
"elementType": "geometry",
"stylers": {
"color": "#064f85"
}
},
{
"featureType": "railway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": {
"color": "#005b96",
"lightness": 1
}
},
{
"featureType": "highway",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"featureType": "arterial",
"elementType": "geometry.fill",
"stylers": {
"color": "#00508b"
}
},
{
"featureType": "poi",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "green",
"elementType": "all",
"stylers": {
"color": "#056197",
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "local",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "arterial",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "boundary",
"elementType": "geometry.fill",
"stylers": {
"color": "#029fd4"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"color": "#1a5787"
}
},
{
"featureType": "label",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}]
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
name: '人数',
type: 'scatter',
coordinateSystem: 'geo',
data: [],
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}]
}
$(function(){
myChart.setOption(option);
})
function load() {
$.ajax({
type : "POST",
url : "/list",
data: {
beginTime : $('#beginTime').val(),
endTime : $('#endTime').val()
},
cache : false,
async : false,
success : function(result) {
var res = [];
console.log(result)
for (var i = 0; i < result.length; i++) {
//获得每个城市的统计数量
var count = result[i].value
//获得经纬度
var geo = [ result[i].longitude, result[i].latitude ]
res.push({
name : result[i].name,
//两个字符串拼接
value : geo.concat(count),
});
}
myChart.setOption({
series : [ {
name: '人数',
data : res,
}
]
});
}
})
}
function reLoad() {
load();
}- 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
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
注意：
1、数据放于option里面，此处采用的是经纬度的方式，而且显示的地点名字是由后端传递过来的，所以地点名字不受官方提供的js或者json数据限制
后端代码
@PostMapping("/list")
@ResponseBody
public List<MapDto> highList(@RequestParam("beginTime") String beginTime,
@RequestParam("endTime") String endTime) {
List<MapDto> result = new ArrayList<>();
result.add(new MapDto("广州", 123L, 113.23, 23.16));
result.add(new MapDto("花县", 123L, 113.19, 23.4));
result.add(new MapDto("新十", 1213L, 114.2, 24.09));
result.add(new MapDto("增城", 213L, 113.81, 23.13));
result.add(new MapDto("从化", 133L, 113.55, 23.57));
result.add(new MapDto("龙门", 143L, 114.25, 23.75));
result.add(new MapDto("番禺", 523L, 113.36, 22.95));
result.add(new MapDto("海口", 453L, 110.35, 20.02));
result.add(new MapDto("汕头", 933L, 116.69, 23.39));
result.add(new MapDto("洪江", 733L, 110.38, 21.2));
result.add(new MapDto("茂名", 133L, 110.88, 21.68));
result.add(new MapDto("佛山", 14L, 113.11, 23.05));
result.add(new MapDto("江门", 143L, 113.06, 22.61));
result.add(new MapDto("深圳", 443L, 114.07, 22.62));
result.add(new MapDto("宝安", 1663L, 113.85, 22.58));
result.add(new MapDto("珠海", 173L, 113.52, 22.3));
result.add(new MapDto("韶关", 19L, 113.62, 24.84));
result.add(new MapDto("曲江", 193L, 113.58, 24.68));
result.add(new MapDto("乐昌", 1013L, 113.35, 25.14));
result.add(new MapDto("仁化", 1223L, 113.73, 25.11));
result.add(new MapDto("南雄", 12L, 114.33, 25.14));
result.add(new MapDto("始兴", 123L, 114.08, 24.78));
return result;
}
- 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
附加：MapDto实体
public class MapDto {
private String name;
private Long value;
//经纬度，一定要在你加载的js地图显示的区域内，例如这里加载的是广东省的，
//所以生成的数据的经纬度都要在广东省内
private Double longitude;
private Double latitude;
//getter 和 setter
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
总结：先加载一张地图，是根据经纬度的方式来加载的，然后在添加一些数据，数据就可以通过ajax方式进行动态写入并展示出来。
