测试地图

src/views/about/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="W-full pr30 pl30 pt30 bg-green">
-    <div  class="mr-auto ml-auto w500 h400 relative">
-      <img style="width: 500px;" :src="img149">
+    <div class="mr-auto ml-auto w500 h400 relative">
+      <!-- <img style="width: 500px;" :src="img149"> -->
       <canvas width="500" height="400" id="fuzhou"></canvas>
     </div>
-    
+
   </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent, onMounted } from "vue";
 import api from '@/api'
@@ -22,18 +22,20 @@ const logOut = () => {
   })
 }
 const renderMap = () => {
-echarts.registerMap("fz",fuzhouJson)
+  var imageDom = document.createElement('img')
+  imageDom.src = img149
+  echarts.registerMap("fz", fuzhouJson)
   let Chart = echarts.init(document.getElementById("fuzhou"));
   // 颜色或文字的配置
   let option = {
-    geo: {
+    geo: [{
       type: "map",
-      aspectScale:0.88, // 横向拉伸
+      aspectScale: 1.5, // 横向拉伸
 
-      zoom:1.5, //缩放比例
+      zoom: 1.5, //缩放比例
       roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
       map: "fz",
-      nameMap:'福州地图',
+      nameMap: '福州地图',
       label: {
         show: true,
         normal: {
@@ -48,23 +50,60 @@ echarts.registerMap("fz",fuzhouJson)
         },
       },
       itemStyle: {
+
         normal: {
-          areaColor: "#ffffff", //地图本身的颜色
-          borderColor: "#ff4400", //省份边框颜色
+          areaColor: 'rgb(0,0,0,0)',
           borderWidth: 1, // 省份边框宽度
           opacity: 0.75, //图形透明度
-   
+
         },
         emphasis: {
           areaColor: "#ff4400", // 高亮时候地图显示的颜色
           borderWidth: 0, // 高亮时的边框宽度
         },
       },
-      layoutSize:100,
+      layoutSize: 100,
       textFixed: {
         Alaska: [20, -20],
       }
     },
+    {
+      type: "map",
+      aspectScale: 1.5, // 横向拉伸
+
+      zoom: 1.5, //缩放比例
+      roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
+      map: "fz",
+      nameMap: '福州地图',
+      label: {
+        show: true,
+        normal: {
+          show: true, // 默认地图文字字号和字体颜色
+          fontSize: 10,
+          color: "#ffffff",
+        },
+        emphasis: {
+          show: true,
+          fontSize: 10, // 选中地图文字字号和字体颜色
+          color: "#CFCFCF",
+        },
+      },
+      itemStyle: {
+        areaColor:{   
+          image:imageDom,
+          repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
+        },
+       
+        emphasis: {
+          areaColor: "#ff4400", // 高亮时候地图显示的颜色
+          borderWidth: 0, // 高亮时的边框宽度
+        },
+      },
+      layoutSize: 100,
+      textFixed: {
+        Alaska: [20, -20],
+      }
+    }],
     series: [
       {
         type: "effectScatter",
@@ -79,6 +118,7 @@ echarts.registerMap("fz",fuzhouJson)
           },
         },
         itemStyle: {
+
           normal: {
             shadowBlur: 10,
             color: "#ff4400",
@@ -111,14 +151,15 @@ export default defineComponent({
   },
 });
 </script>
-  
+
 <style scoped>
-#fuzhou{
-position: absolute;
-left: 0;
-top: 0;
+#fuzhou {
+  position: absolute;
+  left: 0;
+  top: 0;
 
 }
+
 .bg-primary-yellow {
   background-color: #f9de5b;
 }