echarts map+散点图 按条件查询并动态显示结果
想法：从后台将数据显示到map上，同时可以根据查询条件进行查询并动态展示数据。
页面代码
<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="background-color: #fff;" 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="background-color: #fff;" 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、其中是用于加载地图的js文件，下载地址，需要独立引入
2、查询按钮的类型一定要设置为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、数据放于option里面，此处采用的是经纬度的方式，而且显示的地点名字是由后端传递过来的，所以地点名字不受官方提供的js或者json数据限制
后端代码
@PostMapping("/list")
@ResponseBody
public List highList(@RequestParam("beginTime") String beginTime,
@RequestParam("endTime") String endTime) {
List 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;
}
附加：MapDto实体
public class MapDto {
private String name;
private Long value;
//经纬度，一定要在你加载的js地图显示的区域内，例如这里加载的是广东省的，
//所以生成的数据的经纬度都要在广东省内
private Double longitude;
private Double latitude;
//getter 和 setter
}总结：先加载一张地图，是根据经纬度的方式来加载的，然后在添加一些数据，数据就可以通过ajax方式进行动态写入并展示出来。