echarts地图带散点标记

这里以河南地推为例

1、绘制河南地图 在DATA V里找到河南的位置信息

 复制然后浏览器打开

 然后在页面引用 代码如下 

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import HN from "../src/api/heNan.json"; //地址一定要引入正确
type EChartsOption = echarts.EChartsOption;
 
onMounted(() => {
  let option: EChartsOption;
  let mapDom = document.getElementById("map");
  let mapChart = echarts.init(mapDom);
  //初始化元素
  echarts.registerMap("HN", HN as any);
  mapChart.setOption(
    option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c}",
      },
      visualMap: {
        type: "piecewise",
        pieces: [{ color: "red" }],
      },
      series: [
        {
          name: "中国",
          type: "map",
          map: "HN",
          label: {
            // 省份的名称是否显示
            show: true,
            // 未选字体颜色
            color: "#fff",
            // 字体大小
            fontSize: 10,
          },
          data: [],
          itemStyle: {
            normal: {
              borderColor: "rgba(255, 255, 255, 0.4)",
              areaColor: "rgba(18,77,178,0.2)",
              borderWidth: 1,
              // 虚化程度
              shadowBlur: 1,
              shadowColor: "rgba(189,243,249)",
            },
            emphasis: {
              show: false,
              // 每个区域的颜色
              // 鼠标滑过颜色
              areaColor: "#97EFF4",
              // 鼠标滑过边框颜色
              shadowColor: "#05EFF7",
              // XY轴的偏移量
              shadowOffsetX: 5,
              shadowOffsetY: 5,
 
           
            },
          },
        },
      ],
    }
  );
});
</script>
 
<template>
  <div
    class="map"
    id="map"
    style="height: 55vw; width: 90%; margin-top: 18vw ;background-color: black;" 
  ></div>
</template>
 
<style scoped lang="less">
</style>

就得到了一个河南地图

 然后添加三点标记 以标记郑州为例

要进行散点图option中必须要加上geo项  geo map要使用导出的json

geo: {
        map: "HN",
        // 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
        // show: true,
        // roam: true,
        label: {
          emphasis: {
            show: false,
          },
        },
        // 地图的背景色
        itemStyle: {
          normal: {
            areaColor: "rgba(0,0,0,0.5)",
            borderColor: "rgba(0,0,0,0.5)",
            shadowColor: "rgba(0,0,0,0.5)",
            shadowBlur: 30,
          },
        },
      },

series中添加一个type:为 effectScatter 的图表  通过zlevel设置层级 层级大的会在层级小的上面

series: [
        {
          name: "河南",
          type: "map",
          map: "HN",
          label: {
            // 省份的名称是否显示
            show: true,
            // 未选字体颜色
            color: "#fff",
            // 字体大小
            fontSize: 10,
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(255, 255, 255, 0.4)",
              areaColor: "rgba(18,77,178,0.2)",
              borderWidth: 1,
              // 虚化程度
              shadowBlur: 1,
              shadowColor: "rgba(189,243,249)",
            },
            emphasis: {
              show: false,
              // 每个区域的颜色
              // 鼠标滑过颜色
              areaColor: "#97EFF4",
              // 鼠标滑过边框颜色
              shadowColor: "#05EFF7",
              // XY轴的偏移量
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
          data: [],
          zlevel: 0, //层级，层级大的会在层级小的上面
          // 选中状态样式
          select: {
            itemStyle: {
              color: "#97EFF4",
            },
          },
        },
        // 气泡
        {
          type: "effectScatter",
          coordinateSystem: "geo", //使用地理坐标系
          //要有对应的经纬度才显示，先经度再维度
          data: [
            { name: "1", value: [113.61, 34.75] },
            // { name: '2', value: [106.48,38.89] },
            // { name: '3', value: [106.38,38.38] },
            // { name: '4', value: [106.50,37.37] },
            // { name: '5', value: [105.58,36.90] },
          ],
          showEffectOn: "render", //绘制完成后显示特效
          rippleEffect: {
            scale: 10, // 波纹的最大缩放比例
            brushType: "fill", // 波纹的绘制方式 stroke
          },
          hoverAnimation: true,
          label: {
            //图形上的文本标签
            show: true,
            formatter: "{b}",
            position: "right",
            fontWeight: 500,
            fontSize: 10,
          },
          //默认样式
          itemStyle: {
            color: "#CC17FA",
            shadowBlur: 10,
            shadowColor: "#333",
          },
          //鼠标移入时样式
          emphasis: {
            show: false,
            // 每个区域的颜色
            // 鼠标滑过颜色
            areaColor: "#97EFF4",
            // 鼠标滑过边框颜色
            shadowColor: "#05EFF7",
            // XY轴的偏移量
            shadowOffsetX: 5,
            shadowOffsetY: 5,
          },
          zlevel: 1,
          select: {
            itemStyle: {
              color: "#FFF",
            },
          },
        },
      ],

效果  brushType: "fill", 

 效果  brushType: "stroke",

 

最后附上完整代码  

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import HN from "../src/api/heNan.json";
type EChartsOption = echarts.EChartsOption;

onMounted(() => {
  let option: EChartsOption;
  let mapDom = document.getElementById("map");
  let mapChart = echarts.init(mapDom);
  //初始化元素
  echarts.registerMap("HN", HN as any);
  mapChart.setOption(
    (option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c}",
      },
      visualMap: {
        type: "piecewise",
        pieces: [{ color: "#43B881" }],
      },
      geo: {
        map: "HN",
        // 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
        // show: true,
        // roam: true,
        label: {
          emphasis: {
            show: false,
          },
        },
        // 地图的背景色
        itemStyle: {
          normal: {
            areaColor: "rgba(0,0,0,0.5)",
            borderColor: "rgba(0,0,0,0.5)",
            shadowColor: "rgba(0,0,0,0.5)",
            shadowBlur: 30,
          },
        },
      },
      series: [
        {
          name: "河南",
          type: "map",
          map: "HN",
          label: {
            // 省份的名称是否显示
            show: true,
            // 未选字体颜色
            color: "#fff",
            // 字体大小
            fontSize: 10,
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(255, 255, 255, 0.4)",
              areaColor: "rgba(18,77,178,0.2)",
              borderWidth: 1,
              // 虚化程度
              shadowBlur: 1,
              shadowColor: "rgba(189,243,249)",
            },
            emphasis: {
              show: false,
              // 每个区域的颜色
              // 鼠标滑过颜色
              areaColor: "#97EFF4",
              // 鼠标滑过边框颜色
              shadowColor: "#05EFF7",
              // XY轴的偏移量
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
          data: [],
          zlevel: 0, //层级，层级大的会在层级小的上面
          // 选中状态样式
          select: {
            itemStyle: {
              color: "#97EFF4",
            },
          },
        },
        // 气泡
        {
          type: "effectScatter",
          coordinateSystem: "geo", //使用地理坐标系
          //要有对应的经纬度才显示，先经度再维度
          data: [
            { name: "1", value: [113.61, 34.75] },
            // { name: '2', value: [106.48,38.89] },
            // { name: '3', value: [106.38,38.38] },
            // { name: '4', value: [106.50,37.37] },
            // { name: '5', value: [105.58,36.90] },
          ],
          showEffectOn: "render", //绘制完成后显示特效
          rippleEffect: {
            scale: 10, // 波纹的最大缩放比例
            brushType: "fill", // 波纹的绘制方式 stroke
          },
          hoverAnimation: true,
          label: {
            //图形上的文本标签
            show: true,
            formatter: "{b}",
            position: "right",
            fontWeight: 500,
            fontSize: 10,
          },
          //默认样式
          itemStyle: {
            color: "#CC17FA",
            shadowBlur: 10,
            shadowColor: "#333",
          },
          //鼠标移入时样式
          emphasis: {
            show: false,
            // 每个区域的颜色
            // 鼠标滑过颜色
            areaColor: "#97EFF4",
            // 鼠标滑过边框颜色
            shadowColor: "#05EFF7",
            // XY轴的偏移量
            shadowOffsetX: 5,
            shadowOffsetY: 5,
          },
          zlevel: 1,
          select: {
            itemStyle: {
              color: "#FFF",
            },
          },
        },
      ],
    })
  );
});
</script>

<template>
  <div
    class="map"
    id="map"
    style="height: 55vw; width: 90%; margin-top: 18vw; background-color: black"
  ></div>
</template>

<style scoped lang="less"></style>