echarts map地图显示散点图

最新推荐文章于 2025-03-01 14:22:55 发布

哆比哆比

最新推荐文章于 2025-03-01 14:22:55 发布

阅读量754

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/WMW_wmw/article/details/127883304

版权

echarts 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript将带有经纬度的JSON数据导入到地图中，利用scatter图例创建散点，并设置自定义图标、大小及悬浮效果。示例代码展示了在地图上展示椒江区白云街道南山公墓和乌石村公益性公墓的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先准备好有经纬度的json文件

[
    {
        "name": "椒江区白云街道南山公墓",
        "value": [
            121.418228,
            28.664811
        ]
    },
    {
        "name": "乌石村公益性公墓",
        "value": [
            121.382656,
            28.676588
        ]
    },
]

在地图页引入

import cemetery from './cemetery.json'

代码写法

 series: [
          ...
          {
            name: '',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'image://' + require('../images/zuobiao.png'), // 图标路径
            symbolSize: [23, 30], // 图标大小
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 9
                },
                formatter(value) { //悬浮展示内容
                  return ''
                }
              }
            },
            data: cemetery,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }
        ]