【金掌桂2022年开门红需求】获取数据截止时间和横屏后开门红业务地图字体变大问题，调整业务地图图例、logo、开门红图标位置及大小

src/views/ebiz/goodStart/BusinessMap.vue

@@ -1,36 +1,50 @@
 <template>
-  <div>
+  <div class="relative">
     <div class="china-map" id="guangxi"></div>
+    <img class="absolute top5 left15 m-logo" src="@/assets/images/goodStart/logo.png" alt="" />
+    <img class="absolute bottom25 left10 m-tuli" src="@/assets/images/goodStart/tuli.png" alt="" />
+    <div class="absolute bottom5 left10 m-time">
+      <p class="fwb minfs" style="color: #c01212">开门红业务地图</p>
+      <p class="minfs01" style="color: #333">数据截止时间：{{ date }}</p>
+    </div>
+    <img class="absolute bottom5 right10 m-tubiao" src="@/assets/images/goodStart/tubiao.png" alt="" />
   </div>
 </template>
-<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
+<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.rate.js"></script>
 <script src="js/map/js/province/guangxi.js"></script> -->
 <script>
-import { Tab, Tabs, Collapse, CollapseItem, Checkbox, CheckboxGroup, Dialog, Popup } from 'vant'
+import { getMapDataList } from '@/api/ebiz/goodStart'
+import utils from '@/assets/js/utils/date-utils'
+
 export default {
   name: 'list',
-  components: {
-    [Tab.name]: Tab,
-    [Tabs.name]: Tabs,
-    [Collapse.name]: Collapse,
-    [CollapseItem.name]: CollapseItem,
-    [Dialog.name]: Dialog,
-    [Checkbox.name]: Checkbox,
-    [CheckboxGroup.name]: CheckboxGroup,
-    [Popup.name]: Popup
-  },
   data() {
-    return {}
+    return {
+      date: ''
+    }
   },
   created() {},
   mounted() {
     this.init()
   },
   methods: {
-    init() {
+    async init() {
+      this.date = utils.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
+      const result = await getMapDataList({})
+      if (result.result === '0') {
+        let data = result.content
+        data.forEach((item) => {
+          item.value = item.rate
+        })
+        this.showMapFunc(data)
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    showMapFunc(data) {
       let Echart = window.echarts.init(document.querySelector(`#guangxi`))
-        let option = {
-        backgroundColor: '#FFFFFF',
+      let option = {
+        backgroundColor: '#FFECC3',
         title: {
           text: '',
           subtext: '',
@@ -38,57 +52,92 @@ export default {
         },
         tooltip: {
           trigger: 'item',
-          formatter: '{b}<br/>{c} (p / km2)'
+          // 利用formatter来自定义tooltip展示的数据
+          formatter: function (params) {
+            var myseries = option.series[0]
+            var res = ''
+            for (var i = 0; i < myseries.data.length; i++) {
+              if (myseries.data[i].name == params.name) {
+                res += myseries.data[i].comName + '</br>'
+                res += '预收标保' + ' : ' + myseries.data[i].sum + '万元</br>'
+                res += '目标达成率' + ' : ' + myseries.data[i].rate + '%</br>'
+              }
+            }
+            return res
+          }
+        },
+        //左侧小导航图标 0-25 26-50 51-75 76-100
+        visualMap: {
+          rate: 0,
+          max: 100,
+          text: ['高', '低'],
+          show: false,
+          pieces: [
+            // pieces 可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于)
+            { gte: 0, lte: 25, color: '#FFBDBD' },
+            { gte: 26, lte: 50, color: '#FF7B7B' },
+            { gte: 51, lte: 75, color: '#F75252' },
+            { gte: 76, lte: 100, color: '#EE2020' }
+          ]
+          // inRange: {
+          //   color: ['lightskyblue', 'yellow', 'orange','red']
+          // }
         },
-        // //左侧小导航图标
-        // visualMap: {
-        //   min: 0,
-        //   max: 100,
-        //   text: ['高', '低'],
-        //   inRange: {
-        //     color: ['lightskyblue', 'yellow', 'orangered']
-        //   }
-        // },
         //配置属性
         series: [
           {
             name: '报名人数',
             type: 'map',
+            zoom: 1.2, //设置地图大小，这里是关键，一定要放在 series中
+            roam: 'scale', //支持拖拽缩放,设置为false,开启为true,缩放 roam设置为'scale'，拖拽roam设置为'move'
+            scaleLimit: {
+              //滚轮缩放的极限控制
+              min: 1, //缩放最小大小
+              max: 6 //缩放最大大小
+            },
             mapType: '广西', //需要注意：省份中应使用汉字即如 ‘mapType:"广西"’
-            roam: true,
             label: {
+              //文本设置（Echarts其他图表都有这样的设置，值得多看）
               normal: {
-                  show: true,//显示市区标签
-                  textStyle:{color:"#c71585"}//省份标签字体颜色
+                show: true, //显示市区标签
+                textStyle: { color: '#c71585' } //省份标签字体颜色
               },
-              emphasis: {//对应的鼠标悬浮效果
-                  show: true,
-                  textStyle:{color:"#800080"}
+              emphasis: {
+                //对应的鼠标悬浮效果
+                show: true,
+                textStyle: { color: '#800080' }
               }
             },
-            itemStyle:{
-                normal: {
-                    borderWidth: .5,//区域边框宽度
-                    borderColor: '#009fe8',//区域边框颜色
-                    areaColor:"#ffefd5",//区域颜色
-                },
-                emphasis: {
-                    show:true,
-                    borderWidth: .5,
-                    borderColor: '#4b0082',
-                    areaColor:"#f47920",
-                }
+            itemStyle: {
+              normal: {
+                borderWidth: 0.5, //区域边框宽度
+                borderColor: '#009fe8', //区域边框颜色
+                areaColor: '#ffefd5' //区域颜色
+              },
+              emphasis: {
+                show: true,
+                borderWidth: 0.5,
+                borderColor: '#4b0082',
+                areaColor: '#FFC93B' //选中区域块颜色
+              }
             },
-            data: [
-              { name: '南宁市', value: '100' },
-              { name: '百色市', value: Math.round(Math.random() * 100) }
-            ] //数据
+            data: data  //数据
+            // data: [
+            //   { name: '南宁市', comName: '南寧分公司', sum: '1', rate: '2', value: 0 },
+            //   { name: '玉林市', comName: '南寧分公司', sum: '1', rate: '2', value: 25 },
+            //   { name: '桂林市', comName: '南寧分公司', sum: '1', rate: '2', value: 26 },
+            //   { name: '柳州市', comName: '南寧分公司', sum: '1', rate: '2', value: 50 },
+            //   { name: '河池市', comName: '南寧分公司', sum: '1', rate: '2', value: 51 },
+            //   { name: '贺州市', comName: '南寧分公司', sum: '1', rate: '2', value: 75 },
+            //   { name: '梧州市', comName: '南寧分公司', sum: '1', rate: '2', value: 76 },
+            //   { name: '百色市', comName: '南寧分公司', sum: '1', rate: '2', value: 100 }
+            // ] 
           }
         ]
       }
       // 加载绘制Echarts图形
       Echart.setOption(option)
-      window.addEventListener('resize', function() {
+      window.addEventListener('resize', function () {
         Echart.resize() //不加会出现高度为0
       })
     }
@@ -96,8 +145,26 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .china-map {
-    width: 100%;
-    height: 100vh;
-  }
+.china-map {
+  width: 100%;
+  height: 100vh;
+}
+.m-logo {
+  width: 40px;
+  height: 15px;
+}
+.m-tuli {
+  width: 48px;
+  height: 36px;
+}
+.m-tubiao {
+  width: 64px;
+  height: 32px;
+}
+.minfs {
+  font-size: 1.6vw !important;
+}
+.minfs01 {
+  font-size: 1.4vw !important;
+}
 </style>