|
1.确保你已经引入了 ECharts 的库文件，可以通过 CDN 引入，也可以下载到本地后引入。在 HTML 文件中添加以下标签：
ECharts 地图标点示例
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等。
|