1

src/views/about/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="W-full pr30 pl30 pt30 bg-green">
-    <div class="mr-auto ml-auto w500 h400 relative">
+    <div class="mr-auto ml-auto w877 relative bg-black">
       <img
         id="bg"
         style="width: 877px; height: 867px"
@@ -15,8 +15,9 @@
 import { defineComponent, onMounted } from "vue";
 import api from "@/api";
 import router from "@/router";
-import fuzhouJson from "@/assets/json/福州市v2.json";
-import fujianJson from "@/assets/json/福建省v3.json";
+import fuzhou_full from "@/assets/json/福州市v2_full.json";
+import fujian_full from "@/assets/json/福建省v3_full.json";
+import fujian from "@/assets/json/福建省v3.json";
 import echarts from "echarts";
 import img149 from "@/assets/img/about/149.png";
 // import echarts from 'echarts'
@@ -28,8 +29,9 @@ const logOut = () => {
 const renderMap = () => {
   var imageDom = document.createElement("img");
   imageDom.src = "http://www.bigemap.com/map_source/satel/small/14.png";
-  echarts.registerMap("fz", fuzhouJson);
-  echarts.registerMap("fj", fujianJson);
+  echarts.registerMap("fujian", fujian);
+  echarts.registerMap("fuzhou_full", fuzhou_full);
+  echarts.registerMap("fujian_full", fujian_full);
   let Chart = echarts.init(document.getElementById("fuzhou"));
   // 颜色或文字的配置
   let option = {
@@ -40,7 +42,7 @@ const renderMap = () => {
 
       //   zoom: 1, //缩放比例
       //   roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
-      //   map: "fz",
+      //   map: "fuzhou_full",
       //   nameMap: '福州地图',
       //   label: {
       //     show: true,
@@ -76,15 +78,16 @@ const renderMap = () => {
       // {
       //   type: "map",
       //   aspectScale: 1, // 横向拉伸
-      //   tooltip:{},
+      //   zlevel:1,
+      //   tooltip: {},
       //   zoom: 1, //缩放比例
       //   roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
-      //   map: "fj",
+      //   map: "fujian",
       //   nameMap: "福建地图",
       //   label: {
       //     show: true,
       //     normal: {
-      //       show: false, // 默认地图文字字号和字体颜色
+      //       show: true, // 默认地图文字字号和字体颜色
       //       fontSize: 10,
       //       color: "#ffffff",
       //     },
@@ -95,16 +98,18 @@ const renderMap = () => {
       //     },
       //   },
       //   itemStyle: {
-      //     areaColor: "#188df0",
-      //     opacity: 0.7,
-      //     borderColor:"#fff",
-      //     borderWidth:2,
+      //     areaColor: "rgba(255,0,0,0)",
+      //     opacity: 1,
+      //     borderColor: "#fff",
+      //     borderWidth: 2,
+          
       //     emphasis: {
-      //       areaColor: "#2378f7", // 高亮时候地图显示的颜色
+      //       areaColor: "rgba(0,0,0,0)", // 高亮时候地图显示的颜色
       //       borderWidth: 0, // 高亮时的边框宽度
       //     },
       //   },
-      //   layoutSize: 100,
+      //   layoutCenter: ["50%", "44.5%"],
+      //   layoutSize: 877,
       //   top: 0,
       //   left: 0,
       //   textFixed: {
@@ -114,10 +119,11 @@ const renderMap = () => {
       {
         type: "map",
         aspectScale: 1, // 横向拉伸
-        tooltip:{},
+    
+        tooltip: {},
         zoom: 1, //缩放比例
         roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
-        map: "fj",
+        map: "fujian_full",
         nameMap: "福建地图",
         label: {
           show: true,
@@ -135,14 +141,15 @@ const renderMap = () => {
         itemStyle: {
           areaColor: "#188df0",
           opacity: 0.7,
-          borderColor:"#fff",
-          borderWidth:2,
+          borderColor: "#fff",
+          borderWidth: 3,
+          
           emphasis: {
             areaColor: "#2378f7", // 高亮时候地图显示的颜色
             borderWidth: 0, // 高亮时的边框宽度
           },
         },
-        layoutCenter: ['50%', '44.5%'],
+        layoutCenter: ["50%", "44.5%"],
         layoutSize: 877,
         top: 0,
         left: 0,
@@ -160,30 +167,30 @@ const renderMap = () => {
         symbolSize: [60, 60],
         // 这里渲染标志里的内容以及样式
         label: {
-            show: true,
-            formatter(value) {
-                return value.data.value[2];
-            },
-            color: "#fff",
+          show: true,
+          formatter(value) {
+            return value.data.value[2];
+          },
+          color: "#fff",
         },
         // 标志的样式
         itemStyle: {
-            normal: {
-                color: "rgba(255,0,0,1)",
-                shadowBlur: 2,
-                shadowColor: "D8BC37",
-            },
+          normal: {
+            color: "rgba(255,0,0,1)",
+            shadowBlur: 2,
+            shadowColor: "D8BC37",
+          },
         },
         // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
         // 至于如何展示，完全是靠上面的formatter来自己定义的
         data: [
-            { name: "西藏", value: [91.23, 29.5, 2333] },
-            { name: "黑龙江", value: [128.03, 47.01, 1007] },
-            { name: "福州", value: [119.1747, 26.0427, 1007] },
+          { name: "西藏", value: [91.23, 29.5, 2333] },
+          { name: "黑龙江", value: [128.03, 47.01, 1007] },
+          { name: "福州", value: [119.1747, 26.0427, 1007] },
         ],
         showEffectOn: "render",
         rippleEffect: {
-            brushType: "stroke",
+          brushType: "stroke",
         },
         hoverAnimation: true,
         zlevel: 1,