echarts 地图散点标注,求指点,感激不尽,谢谢!
问题:散点图坐标显示名称错误,每次显示的都是坐标的y坐标的数值,而不显示name下的名称!{name: '超市发清河店',value: [116.350155, 40.036564]}
请问为什么我设置的散点图总是调用地图的第二个坐标,而不是调用name里边的数据啊?求指点,请问究竟应该怎样写,谢谢
var geoCoordMap = [{
name: '雍和宫',
value: [116.423633,39.953628]
}, {
name: '圆明园',
value: [116.309804,40.012658]
}, {
name: '故宫',
value: [116.403414,39.924091]
}]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/110108.js"></script>
</head>
<body>
<div>
<a class="btn btn-success btn-sm">海淀区</a>
<div class="x-body">
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 949.75px;height:450px;"></div>
</div>
<script>
//获取div
var myChart = echarts.init(document.getElementById('main'));
//获取geo地图
$.get("js/beijing.js", function(haidianJson) {
//注册地图组件
echarts.registerMap("haidian", haidian);
//散点坐标
var geoCoordMap = [{
name: '雍和宫',
value: [116.423633,39.953628]
}, {
name: '圆明园',
value: [116.309804,40.012658]
}, {
name: '故宫',
value: [116.403414,39.924091]
}]
var option = {
geo: { //地图坐标组件
type: 'map', //数据类型
map: 'haidian', //展示地图的名称
roam: true, //开启平移缩放
zoom: 1, //初始化地图缩放比例
center: [116.32581, 39.896792], //地图居中位置显示
label: {
show: "true", //显示标签
color: "#ff6600",
fontSize: "10",
itemStyle: {
areaColor: "#ff6600", //区域块元素
}
}
},
//散点图
series: [{
type: "scatter", //图标类型
//系列中的数据内容数组
data: geoCoordMap,
coordinateSystem: "geo", //散点图坐标以geo方式显示气泡点 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
symbolSize: 15, //点大小
label: { //点显示数据
show: "true"
},
itemStyle: {
color: "blue" //散点数据文字颜色
}
}]
};
myChart.setOption(option);
})
</script>
</div>
</body>
</html>