echarts+Vue2 绘制2D地图，添加散点，点击散点

原创 已于 2025-04-17 14:42:19 修改 · 692 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

于 2025-03-18 10:27:03 首次发布

举例：显示河北省地图

根据DataV.GeoAtlas地理小工具系列，获取到河北省的地图 .json数据。

例如获取到的河北省 json 地址是https://geo.datav.aliyun.com/areas_v3/bound/130000_full.json，

将其在浏览器打开，在项目中新建一个hebei.json文件，复制全部数据到hebei.json。

然后新建.vue文件，在其中引入即可，具体代码如下：（复制即可直接食用，注意需要全局注册echarts）

<template>
  <div class="container">
    <div ref="myChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import hebei from "../../../public/extend/map/json/province/hebei.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      chart: null,
      hebei,
      regions: [],
      tableData: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let that = this;
      that.$echarts.registerMap("hebei", this.hebei);
      // 散点数据
      var data = [
        {
          name: "河北科技大学",
          areaname: "河北科技大学",
          value: ["114.50963", "37.97686"],
          date: "2025-10-01",
          title: "石家庄",
        },
      ];
      that.tableData = data;
      var option = {
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#A5CC82"], // 蓝绿
          },
        },
        geo: {
          map: "hebei",
          roam: false,
          zoom: 1.0,
          aspectScale: 1,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          top: 35,
          right: 150,
          left: "auto",
          selectedMode: "single",
          select: {
            disabled: true,
            itemStyle: {
              borderWidth: 2.5,
              areaColor: "rgb(8, 207, 221)",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
            label: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          regions: that.tableData,
          label: {
            show: true, // 是否显示地图上的所有地名
            color: "rgba(255, 255, 255, 0.6)",
            fontWeight: "bold",
            fontSize: 16,
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
          emphasis: {
            disabled: false,
            focus: "none",
            label: {
              color: "rgba(255, 255, 255, 1)",
              fontWeight: "bold",
              fontSize: 16,
            },
            itemStyle: {
              borderWidth: 2.5,
              borderColor: "#9AD0F7",
              areaColor: "#962029",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              color: "#FFF",
            },
            backgroundColor: "#011e49",
            borderColor: "transparent",
            borderWidth: 0,
            textShadowColor: "transparent",
            formatter: function (params) {
              let cityitem = that.tableData.find((item) => {
                return item.areaname === params.name;
              });
              // console.log('data', cityitem);
              if (typeof cityitem === "undefined") return "";
              let returnHtml = `
                <div style="font-size: 20px;font-weight: bold;margin-bottom: 6px;">${cityitem.areaname}</div>
                <div style="font-size: 16px;margin-bottom: 22px;">${cityitem.title}</div>
                <div style="font-size: 18px;margin-bottom: 14px;">${cityitem.value}（个）</div>
              `;
              return returnHtml;
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbol: "pin",
            symbolSize: 30,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#33C481",
              },
              emphasis: {
                color: "#f00",
              },
            },
          },
        ],
      };
      if (that.chart === null) {
        that.chart = that.$echarts.init(this.$refs.myChart);
      }
      that.chart.setOption(option);
      that.chart.on("click", (params) => {
        console.log("点击到了");

        if (
          params.componentType === "series" &&
          params.componentSubType === "scatter"
        ) {
          const index = params.dataIndex;
          // 取消所有散点高亮
          that.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0, //第几条series
          });
          // 显示指定data 的tooltip
          // myChart.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0, //第几条series
          //     dataIndex: index, //第几个tooltip
          // });
          // 高亮指定的散点
          that.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0, //第几条series
            dataIndex: index, //第几个tooltip
          });
        }
      });

      window.addEventListener("resize", function () {
        that.chart.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
};
</script>
<style scoped>
.container {
  width: 1006px;
  height: 696px;
}
</style>
地图贴图：

图片例子：

代码示例：（复制即可食用）

根据DataV.GeoAtlas地理小工具系列，获取到全国地图 china.json 数据。

代码中的 tuceng.jpeg 是上面的第一张图

<template>
  <div class="container">
    <div ref="myChart" style="width: 100%; height: 100%"></div>
  </div>
</template>
 
<script>
import hebei from "../../public/extend/map/json/province/china.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      chart: null,
      hebei,
      regions: [],
      tableData: [],
      mapBg: require("../assets/tuceng.jpeg"),
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let that = this;
      that.$echarts.registerMap("hebei", this.hebei);
      let mapBg = document.createElement("img");
      mapBg.src = this.mapBg;
      // 散点数据
      var data = [
        {
          name: "河北科技大学",
          areaname: "河北科技大学",
          value: ["114.50963", "37.97686"],
          date: "2025-10-01",
          title: "石家庄",
        },
      ];
      that.tableData = data;
      var option = {
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#A5CC82"], // 蓝绿
          },
        },
        geo: {
          map: "hebei",
          roam: true,
          zoom: 1.0,
          aspectScale: 1,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          selectedMode: "single",
          select: {
            disabled: true,
            itemStyle: {
              borderWidth: 2.5,
              areaColor: "rgb(8, 207, 221)",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
            label: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          regions: that.tableData,
          label: {
            show: true, // 是否显示地图上的所有地名
            color: "rgba(255, 255, 255, 0.6)",
            fontWeight: "bold",
            fontSize: 16,
          },
          itemStyle: {
            normal: {
              areaColor: {
                image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                repeat: "repeat", // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
              }
            },
            emphasis: {
              areaColor: {
                // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                image: mapBg,
                // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                repeat: "repeat"
              },
            },
          },
          emphasis: {
            disabled: false,
            focus: "none",
            label: {
              color: "rgba(255, 255, 255, 1)",
              fontWeight: "bold",
              fontSize: 16,
            },
            itemStyle: {
              borderWidth: 2.5,
              borderColor: "#9AD0F7",
              areaColor: "#962029",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              color: "#FFF",
            },
            backgroundColor: "#011e49",
            borderColor: "transparent",
            borderWidth: 0,
            textShadowColor: "transparent",
            formatter: function (params) {
              let cityitem = that.tableData.find((item) => {
                return item.areaname === params.name;
              });
              // console.log('data', cityitem);
              if (typeof cityitem === "undefined") return "";
              let returnHtml = `
                <div style="font-size: 20px;font-weight: bold;margin-bottom: 6px;">${cityitem.areaname}</div>
                <div style="font-size: 16px;margin-bottom: 22px;">${cityitem.title}</div>
                <div style="font-size: 18px;margin-bottom: 14px;">${cityitem.value}（个）</div>
              `;
              return returnHtml;
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbol: "pin",
            symbolSize: 30,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#33C481",
              },
              emphasis: {
                color: "#f00",
              },
            },
          },
        ],
      };
      if (that.chart === null) {
        that.chart = that.$echarts.init(this.$refs.myChart);
      }
      that.chart.setOption(option);
      that.chart.on("click", (params) => {
        console.log("点击到了");

        if (
          params.componentType === "series" &&
          params.componentSubType === "scatter"
        ) {
          const index = params.dataIndex;
          // 取消所有散点高亮
          that.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0, //第几条series
          });
          // 显示指定data 的tooltip
          // myChart.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0, //第几条series
          //     dataIndex: index, //第几个tooltip
          // });
          // 高亮指定的散点
          that.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0, //第几条series
            dataIndex: index, //第几个tooltip
          });
        }
      });

      window.addEventListener("resize", function () {
        that.chart.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
};
</script>
<style scoped>
.container {
  width: 900px;
  height: 630px;
}
</style>

vue2 echarts中国地图、在地图上标注经纬度及标注点
carbonzhao的专栏
07-09 466
本文介绍了在Vue项目中使用ECharts 4.9绘制中国地图及散点图的方法。首先通过npm安装指定版本，在main.js全局引入ECharts。然后导入中国地图JSON数据并注册为"china"地图。通过geo组件配置基础地图，或使用map图表类型实现地图展示。重点演示了如何在地理坐标系上叠加散点图，通过设置series的coordinateSystem为"geo"，并配置坐标数据实现城市标注。文末提供了完整的代码示例，包括模板结构、JS逻辑和样式设置，实现了具有交
vue3+echarts：实现绘制3D中国地图+点位涟漪+飞线图效果+带炫酷流水动画效果，Echarts如何实现3d省市区地图与飞线绘制（全国3d地图涟漪水波扩散动画，VUE3中国地图动态线条动画）
高级前端工程师
06-30 4501
echarts 3d中国地图和飞线图绘制，vue3+echarts绘制中国地图,3D地图,省、市、县点位飞线图，vue3 使用echarts map绘制3D中国地图，实现点位涟漪和飞线图效果，vue3+echart绘制中国地图并实现涟漪动画效果，echarts 3d地图涟漪扩散的效果，散点涟漪图echarts 涟漪3d 散点图，echarts有涟漪效果的世界地图，3D中国地图，涟漪水波效果，Vue3+Echarts实现中国立体感地图涟漪水波效果，绘制3D线条效果中国地图动态线条动画，飞线效果，Echarts
echarts地图（河北省）demo例子
08-21
uniapp实现echarts地图（河北省）完整demo例子，下载运行查看效果，复制即用。效果图：https://blog.youkuaiyun.com/qq_45978154/article/details/126457527
vue2 el-image图片大图预览,底部功能区新增自定义按钮(下载和删除)
最新发布
m0_61476911的博客
10-20 66
vue2 el-image大图预览新增自定义按钮
河北省echarts地图资源
12-30
河北省echarts地图资源
vue2+ echarts地图
weixin_72915006的博客
10-31 852
3.完整代码（可以直接复制使用以组件的形式引入页面）准备好dom容器并定义容器的大小。，获取到需要的数据后引入到页面。页面引入echarts。echarts官网地址。4.geoJson获取。
vue2使用echarts地图
mmmm00_的博客
05-28 826
可以将打开下载了4.90版本的vue项目中的node_modules找到里面的map包，移动到echarts最新版本的同样位置目录下。在 mounted()里面调用此方法，用ecahrts的map实现。如果项目中已经安装了echarts的最新版本，又不方便卸载。2.再vue项目的main.js中做如下配置。1.下载echarts4.90版本。
echarts3d地图散点数据陷进地图的解决方案
10-25
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括2D和3D地图。本主题聚焦于“echarts3d地图散点数据陷进地图的解决方案”，这是一个在使用ECharts进行3D地图...
vue2+echarts5:2D地图打点、下钻
cwjxyp的博客
07-12 1174
要实现地图可点击、下钻，为了使地图有3D效果，原本用需要下载依赖,由于存在地图下钻后在区域内无法展示完整地图，改用2D地图 效果展示 结尾附上源码 地图需要有才能挂载，需要将挂载方法写在中 挂载完成后，传入配置项渲染地图、如果有事件也在此时配置 其中和的区别为，前者是内容区的点击事件，即地图区域，后者为整个区域，包含地图和区域的空白部分区域。 下钻 在中不再内置地图数据，在项目中使用的是阿里云的数据。 注意，在本地获取数据没有问题，但当发布到测试环境或者生产环境可能会返回数据403，需要在中添加一行代码配置
Vue echarts4 3D曲面图+散点图（数据可视化）
weixin_44080648的博客
10-26 8723
Vue echarts4 3D曲面图（数据可视化） 第一步：在Vue项目中安装echarts和echarts-gl npm install echarts --save npm install echarts-gl --save 如果需要安装指定版本或是更新项目中的echarts版本，都可直接在npm命令后加入版本号，例如： npm install echarts@4.1.0 --save npm install echarts-gl@1.1.0 --save 第二步：在main.js或是具体页面
关于ucharts绘制的地图上添加散点的问题
ALiMaMaYang的博客
07-03 636
本文介绍了在uniapp开发中使用ucharts插件绘制地图时遇到的限制问题及解决方案。作者发现ucharts对echarts功能进行了阉割，且文档收费不合理。为解决无法通过配置项添加散点的问题，作者提出了自行绘制散点的方案：获取地图GeoJSON数据后，通过canvas在地图中心位置绘制带数字的圆点标记。关键步骤包括：1）获取并处理地图数据；2）计算地图边界和中心坐标；3）将经纬度转换为墨卡托坐标；4）使用canvas API绘制自定义标记。该方法避免了付费需求，保留了完整的地图功能。
vue2版本用echarts实现地图下钻功能 注释详细cv可用
还想陪你看场雪
04-24 1228
vue2版本用echarts-gl实现地图下钻
vue2项目中封装echarts地图的比较优雅的方式
liyoro的专栏
03-08 911
以前写过 vue项目中封装echarts的比较优雅的方式，大屏可视化里面，除了数据图表很常用，显示省市地图区域也是很常用到的，这是姐妹篇。 区域地图选区域时，需要弹窗展示数据，样式是各种各样的，各种排列的数据、图文混搭、视频…这里除了封装echarts区域地图模块，还介绍了下自定义弹窗的实现、自定义弹窗动态加载接口数据的方式 能学到的知识 1、echarts地图模块封装，可复用 2、echarts地图自定义弹窗（显示自定义样式、自定义数据、自定义图片），其它图表的自定义弹窗可参考。 3、echarts地图
vue2+echarts实现3D地图
qq_57614777的博客
01-08 1327
vue2+echarts实现3D地图
vue2+OpenLayers 天地图上打点（1）
wzwzwz555的博客
08-13 464
在这里用的是 7.2.2版本的。
VUE2+Echarts中国地图+散点+提示+功能下钻
m0_74454396的博客
07-30 1309
从0到1的Echarts中国地图+散点+提示+功能下钻
vue2接入高德地图实现折线绘制、起始点标记和轨迹打点的完整功能（提供Gitee源码）
黄团团的个人博客
10-01 1858
vue2接入高德地图实现折线绘制、起始点标记和轨迹打点的完整功能
使用Reactecharts进行散点图的展示并添加对应的点击事件
bossweiga的博客
03-27 1454
废话不多说，直接上代码。
我想用vue + Echarts+ three.js做一个3D建筑城市化大屏项目，核心功能有3D地图，路线规划，地图动态交互；你推荐用哪些封装库？他们在该项目起到什么作用？并推荐相关的开源项目
08-07
- **echarts-gl**：ECharts的3D扩展，支持在3D场景中绘制图表（如3D柱状图、散点图等）[^8]。 - 作用：在3D城市地图上叠加数据可视化，如建筑物高度用柱状图表示。 - **vue-echarts**：Vue的ECharts组件，便于在Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值