前端代码出现了问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 echarts.js -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/bmap.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript" src="./js/CollectionOperation.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=CPvUBT1TVCUm6DSAvN639oj0uoloUbVH">
</script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 Dom -->
<div id="main" style="width: 100%;height:500px;"></div>
</body>
<script type="text/javascript">
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
// 发送 AJAX 请求获取站点数据
var endStationCountURL = "http://localhost:8080/nybike/operation/findEndStationCount";
$.get(endStationCountURL, function (result) {
// 判断响应成功，然后解析结果数据
if (result.state == 1000) {
var scatterDatas = result.data;
var data = [];
var geoCoordMap = {};
// 遍历 scatterDatas 数组
scatterDatas.forEach(function (scatterData) {
// 提取每个 scatterData 中的 data 和 geoCoordMap
var data1 = scatterData.data;
var geoCoordMap1 = scatterData.geoCoordMap;
// 将数据添加到数组中
data = data.concat(data1);
// 合并 geoCoordMap 对象
Object.assign(geoCoordMap, geoCoordMap1);
});
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;
};
// 定义地图配置
var option = {
title: {
text: '站点作为终点站点次数',
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: function (params) {
return params.name + '<br>次数: ' + params.value[2];
}
},
bmap: {
center: [40.72229346, -73.99147535], // 地图中心点
zoom: 12, // 缩放级别
roam: true, // 开启平移和缩放
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
series : [
{
name: '次数',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
itemStyle: {
color: 'green'
},
emphasis: {
label: {
show: true
}
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
</script>
</html>
在JsonResult中的部分结果显示如下
我想实现在地图上通过站点坐标显示散点，鼠标放在散点上会显示value
运行结果
