devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts地图带散点标记_echarts标记地点

作者：2023面试高手 | 2024-03-06 10:31:26

赞

踩

echarts标记地点

这里以河南地推为例

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

 复制然后浏览器打开

 然后在页面引用 代码如下 

  1. <script setup lang="ts">
  2. import * as echarts from "echarts";
  3. import { ref, onMounted } from "vue";
  4. import HN from "../src/api/heNan.json"; //地址一定要引入正确
  5. type EChartsOption = echarts.EChartsOption;
  6.  
  7. onMounted(() => {
  8.   let option: EChartsOption;
  9.   let mapDom = document.getElementById("map");
  10.   let mapChart = echarts.init(mapDom);
  11.   //初始化元素
  12.   echarts.registerMap("HN", HN as any);
  13.   mapChart.setOption(
  14.     option = {
  15.       tooltip: {
  16.         trigger: "item",
  17.         formatter: "{b}<br/>{c}",
  18.       },
  19.       visualMap: {
  20.         type: "piecewise",
  21.         pieces: [{ color: "red" }],
  22.       },
  23.       series: [
  24.         {
  25.           name: "中国",
  26.           type: "map",
  27.           map: "HN",
  28.           label: {
  29.             // 省份的名称是否显示
  30.             show: true,
  31.             // 未选字体颜色
  32.             color: "#fff",
  33.             // 字体大小
  34.             fontSize: 10,
  35.           },
  36.           data: [],
  37.           itemStyle: {
  38.             normal: {
  39.               borderColor: "rgba(255, 255, 255, 0.4)",
  40.               areaColor: "rgba(18,77,178,0.2)",
  41.               borderWidth: 1,
  42.               // 虚化程度
  43.               shadowBlur: 1,
  44.               shadowColor: "rgba(189,243,249)",
  45.             },
  46.             emphasis: {
  47.               show: false,
  48.               // 每个区域的颜色
  49.               // 鼠标滑过颜色
  50.               areaColor: "#97EFF4",
  51.               // 鼠标滑过边框颜色
  52.               shadowColor: "#05EFF7",
  53.               // XY轴的偏移量
  54.               shadowOffsetX: 5,
  55.               shadowOffsetY: 5,
  56.  
  57.            
  58.             },
  59.           },
  60.         },
  61.       ],
  62.     }
  63.   );
  64. });
  65. </script>
  66.  
  67. <template>
  68.   <div
  69.     class="map"
  70.     id="map"
  71.     style="height: 55vw; width: 90%; margin-top: 18vw ;background-color: black;" 
  72.   ></div>
  73. </template>
  74.  
  75. <style scoped lang="less">
  76. </style>

就得到了一个河南地图

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

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

  1. geo: {
  2.         map: "HN",
  3.         // 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
  4.         // show: true,
  5.         // roam: true,
  6.         label: {
  7.           emphasis: {
  8.             show: false,
  9.           },
  10.         },
  11.         // 地图的背景色
  12.         itemStyle: {
  13.           normal: {
  14.             areaColor: "rgba(0,0,0,0.5)",
  15.             borderColor: "rgba(0,0,0,0.5)",
  16.             shadowColor: "rgba(0,0,0,0.5)",
  17.             shadowBlur: 30,
  18.           },
  19.         },
  20.       },

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

  1. series: [
  2.         {
  3.           name: "河南",
  4.           type: "map",
  5.           map: "HN",
  6.           label: {
  7.             // 省份的名称是否显示
  8.             show: true,
  9.             // 未选字体颜色
  10.             color: "#fff",
  11.             // 字体大小
  12.             fontSize: 10,
  13.           },
  14.           itemStyle: {
  15.             normal: {
  16.               borderColor: "rgba(255, 255, 255, 0.4)",
  17.               areaColor: "rgba(18,77,178,0.2)",
  18.               borderWidth: 1,
  19.               // 虚化程度
  20.               shadowBlur: 1,
  21.               shadowColor: "rgba(189,243,249)",
  22.             },
  23.             emphasis: {
  24.               show: false,
  25.               // 每个区域的颜色
  26.               // 鼠标滑过颜色
  27.               areaColor: "#97EFF4",
  28.               // 鼠标滑过边框颜色
  29.               shadowColor: "#05EFF7",
  30.               // XY轴的偏移量
  31.               shadowOffsetX: 5,
  32.               shadowOffsetY: 5,
  33.             },
  34.           },
  35.           data: [],
  36.           zlevel: 0, //层级，层级大的会在层级小的上面
  37.           // 选中状态样式
  38.           select: {
  39.             itemStyle: {
  40.               color: "#97EFF4",
  41.             },
  42.           },
  43.         },
  44.         // 气泡
  45.         {
  46.           type: "effectScatter",
  47.           coordinateSystem: "geo", //使用地理坐标系
  48.           //要有对应的经纬度才显示，先经度再维度
  49.           data: [
  50.             { name: "1", value: [113.61, 34.75] },
  51.             // { name: '2', value: [106.48,38.89] },
  52.             // { name: '3', value: [106.38,38.38] },
  53.             // { name: '4', value: [106.50,37.37] },
  54.             // { name: '5', value: [105.58,36.90] },
  55.           ],
  56.           showEffectOn: "render", //绘制完成后显示特效
  57.           rippleEffect: {
  58.             scale: 10, // 波纹的最大缩放比例
  59.             brushType: "fill", // 波纹的绘制方式 stroke
  60.           },
  61.           hoverAnimation: true,
  62.           label: {
  63.             //图形上的文本标签
  64.             show: true,
  65.             formatter: "{b}",
  66.             position: "right",
  67.             fontWeight: 500,
  68.             fontSize: 10,
  69.           },
  70.           //默认样式
  71.           itemStyle: {
  72.             color: "#CC17FA",
  73.             shadowBlur: 10,
  74.             shadowColor: "#333",
  75.           },
  76.           //鼠标移入时样式
  77.           emphasis: {
  78.             show: false,
  79.             // 每个区域的颜色
  80.             // 鼠标滑过颜色
  81.             areaColor: "#97EFF4",
  82.             // 鼠标滑过边框颜色
  83.             shadowColor: "#05EFF7",
  84.             // XY轴的偏移量
  85.             shadowOffsetX: 5,
  86.             shadowOffsetY: 5,
  87.           },
  88.           zlevel: 1,
  89.           select: {
  90.             itemStyle: {
  91.               color: "#FFF",
  92.             },
  93.           },
  94.         },
  95.       ],

效果  brushType: "fill", 

 效果  brushType: "stroke",

 

最后附上完整代码  

  1. <script setup lang="ts">
  2. import * as echarts from "echarts";
  3. import { ref, onMounted } from "vue";
  4. import HN from "../src/api/heNan.json";
  5. type EChartsOption = echarts.EChartsOption;
  6.  
  7. onMounted(() => {
  8.   let option: EChartsOption;
  9.   let mapDom = document.getElementById("map");
  10.   let mapChart = echarts.init(mapDom);
  11.   //初始化元素
  12.   echarts.registerMap("HN", HN as any);
  13.   mapChart.setOption(
  14.     (option = {
  15.       tooltip: {
  16.         trigger: "item",
  17.         formatter: "{b}<br/>{c}",
  18.       },
  19.       visualMap: {
  20.         type: "piecewise",
  21.         pieces: [{ color: "#43B881" }],
  22.       },
  23.       geo: {
  24.         map: "HN",
  25.         // 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
  26.         // show: true,
  27.         // roam: true,
  28.         label: {
  29.           emphasis: {
  30.             show: false,
  31.           },
  32.         },
  33.         // 地图的背景色
  34.         itemStyle: {
  35.           normal: {
  36.             areaColor: "rgba(0,0,0,0.5)",
  37.             borderColor: "rgba(0,0,0,0.5)",
  38.             shadowColor: "rgba(0,0,0,0.5)",
  39.             shadowBlur: 30,
  40.           },
  41.         },
  42.       },
  43.       series: [
  44.         {
  45.           name: "河南",
  46.           type: "map",
  47.           map: "HN",
  48.           label: {
  49.             // 省份的名称是否显示
  50.             show: true,
  51.             // 未选字体颜色
  52.             color: "#fff",
  53.             // 字体大小
  54.             fontSize: 10,
  55.           },
  56.           itemStyle: {
  57.             normal: {
  58.               borderColor: "rgba(255, 255, 255, 0.4)",
  59.               areaColor: "rgba(18,77,178,0.2)",
  60.               borderWidth: 1,
  61.               // 虚化程度
  62.               shadowBlur: 1,
  63.               shadowColor: "rgba(189,243,249)",
  64.             },
  65.             emphasis: {
  66.               show: false,
  67.               // 每个区域的颜色
  68.               // 鼠标滑过颜色
  69.               areaColor: "#97EFF4",
  70.               // 鼠标滑过边框颜色
  71.               shadowColor: "#05EFF7",
  72.               // XY轴的偏移量
  73.               shadowOffsetX: 5,
  74.               shadowOffsetY: 5,
  75.             },
  76.           },
  77.           data: [],
  78.           zlevel: 0, //层级，层级大的会在层级小的上面
  79.           // 选中状态样式
  80.           select: {
  81.             itemStyle: {
  82.               color: "#97EFF4",
  83.             },
  84.           },
  85.         },
  86.         // 气泡
  87.         {
  88.           type: "effectScatter",
  89.           coordinateSystem: "geo", //使用地理坐标系
  90.           //要有对应的经纬度才显示，先经度再维度
  91.           data: [
  92.             { name: "1", value: [113.61, 34.75] },
  93.             // { name: '2', value: [106.48,38.89] },
  94.             // { name: '3', value: [106.38,38.38] },
  95.             // { name: '4', value: [106.50,37.37] },
  96.             // { name: '5', value: [105.58,36.90] },
  97.           ],
  98.           showEffectOn: "render", //绘制完成后显示特效
  99.           rippleEffect: {
  100.             scale: 10, // 波纹的最大缩放比例
  101.             brushType: "fill", // 波纹的绘制方式 stroke
  102.           },
  103.           hoverAnimation: true,
  104.           label: {
  105.             //图形上的文本标签
  106.             show: true,
  107.             formatter: "{b}",
  108.             position: "right",
  109.             fontWeight: 500,
  110.             fontSize: 10,
  111.           },
  112.           //默认样式
  113.           itemStyle: {
  114.             color: "#CC17FA",
  115.             shadowBlur: 10,
  116.             shadowColor: "#333",
  117.           },
  118.           //鼠标移入时样式
  119.           emphasis: {
  120.             show: false,
  121.             // 每个区域的颜色
  122.             // 鼠标滑过颜色
  123.             areaColor: "#97EFF4",
  124.             // 鼠标滑过边框颜色
  125.             shadowColor: "#05EFF7",
  126.             // XY轴的偏移量
  127.             shadowOffsetX: 5,
  128.             shadowOffsetY: 5,
  129.           },
  130.           zlevel: 1,
  131.           select: {
  132.             itemStyle: {
  133.               color: "#FFF",
  134.             },
  135.           },
  136.         },
  137.       ],
  138.     })
  139.   );
  140. });
  141. </script>
  142.  
  143. <template>
  144.   <div
  145.     class="map"
  146.     id="map"
  147.     style="height: 55vw; width: 90%; margin-top: 18vw; background-color: black"
  148.   ></div>
  149. </template>
  150.  
  151. <style scoped lang="less"></style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/197978
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号