地图

src/views/zdsz/bigscreen/index.vue

@@ -65,7 +65,21 @@
       </div>
       <!-- 左边俩 结束 -->
       <!-- 中间地图 -->
-      <div id="echartsMap" class="mainMap" ref="mainMap"></div>
+      <div class="mainMap">
+        <div id="echartsMap" ref="mainMap" class="ditu"></div>
+        <span class="map_dw_dh">25642</span><!--德惠市 -->
+        <span class="map_dw_ys">25642</span><!--榆树市-->
+        <span class="map_dw_na">25642</span><!--农安县-->
+        <span class="map_dw_gzl">25642</span><!--公主岭市-->
+        <span class="map_dw_jt">25642</span><!--九台区-->
+        <span class="map_dw_kc">25642</span><!--宽城区-->
+        <span class="map_dw_ly">25642</span><!--绿园区-->
+        <span class="map_dw_ed">25642</span><!--二道区-->
+        <span class="map_dw_cy">25642</span><!--朝阳区-->
+        <span class="map_dw_sy">25642</span><!--双阳区-->
+        <span class="map_dw_ng">25642</span><!--南关区-->
+      </div>
+      
       <!-- 中间地图 结束 -->
       <!-- 右边俩 -->
       <div class="mainRight">
@@ -1056,6 +1070,9 @@
         ];
 
         let myOption = { // 进行相关配置
+          // grid: {
+          //   top:'5%',
+          // },
           tooltip: {// 鼠标移到图里面的浮动提示框
             show: true
           },
@@ -1075,8 +1092,8 @@
             roam: false, //关闭鼠标缩放和漫游
             zoom: 1, //地图缩放级别
             selectedMode: false, //选中模式：single | multiple
-            layoutCenter: ["50%", "49%"], //设置后left/right/top/bottom等属性无效
-            layoutSize: "120%",
+            layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
+            layoutSize: "110%",
             label: {
               normal: {//静态的时候显示的默认样式
                 show: true, //是否显示地图省份得名称
@@ -1384,6 +1401,70 @@
     .mainMap{
       width: 40%;
       height: 560px;
+      position: relative;
+    }
+    .ditu{
+      position: absolute;
+      left: 0;
+      top:0;
+      z-index: 0;
+      width: 100%;
+      height:560px;
+    }
+    .mainMap span{
+      font-size: 12px;
+      color:#fff;
+      background: url("~@/assets/images/map_pb.png") no-repeat;
+      width: 60px;
+      height: 76px;
+      text-align: center;
+      display: block;
+      padding: 4px;
+      position: absolute;
+    }
+    .mainMap span.map_dw_dh{
+      right: 283px;
+    top: 132px;
+    }
+    .mainMap span.map_dw_ys{
+      right: 127px;
+      top: 58px 
+    }
+    .mainMap span.map_dw_na{
+      left: 263px;
+      top: 169px 
+    }
+    .mainMap span.map_dw_gzl{
+      bottom: 174px;
+      left: 176px 
+    }
+    .mainMap span.map_dw_jt{
+      right: 220px;
+      top: 206px;
+    }
+    .mainMap span.map_dw_kc{
+      left: 346px;
+     top: 230px
+    }
+    .mainMap span.map_dw_ly{
+      left: 292px;
+      bottom: 203px;
+    }
+    .mainMap span.map_dw_ed{
+      right: 297px;
+      bottom: 179px 
+    }
+    .mainMap span.map_dw_cy{
+      left: 318px;
+    bottom: 145px;
+    }
+    .mainMap span.map_dw_sy{
+      right: 302px;
+      bottom: 74px;
+    }
+    .mainMap span.map_dw_ng{
+      right: 358px;
+      bottom: 163px;
     }
   }
   .mainBottom{