1.确保你已经引入了 ECharts 的库文件,可以通过 CDN 引入,也可以下载到本地后引入。在 HTML 文件中添加以下标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts 地图标点示例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script src="script.js"></script>
</body>
</html>
2.在 script.js
文件中,编写以下 JavaScript 代码:
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('map'));
// 注册地图的 JSON 数据
echarts.registerMap('your_map_name', your_map_json);
// 经纬度数据示例(这里使用随机数据作为示例)
var data = [
{ name: '地点A', value: [经度A, 纬度A] },
{ name: '地点B', value: [经度B, 纬度B] },
// 添加更多的标点数据
// ...
];
// 配置选项
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
geo: {
map: 'your_map_name',
roam: true // 可以通过鼠标滚轮放大缩小地图
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: data.map(function (item) {
return {
name: item.name,
value: [item.value[0], item.value[1], 1] // 最后一个数字控制涟漪特效的大小
};
}),
symbolSize: 10, // 控制散点的大小
label: {
show: false // 不显示标点上的标签,避免重叠
},
emphasis: {
itemStyle: {
color: '#FF5733' // 鼠标悬停时的标点颜色
}
}
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
在上面的代码中,你需要替换以下内容:
your_map_name
: 你使用的地图名称,可以自定义,要和你的地图 JSON 数据对应。your_map_json
: 你的地图数据的 JSON,可以使用 ECharts 提供的地图数据或者自己准备数据。可以在 ECharts 的官方网站或者其他资源找到世界地图和各国地图的 JSON 数据。经度A
和纬度A
:代表地点A的经度和纬度,同样,可以添加更多的经纬度数据,如经度B、纬度B等。