Bootstrap

echarts根据经纬度在地图上生成标点

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等。
;