Merge remote-tracking branch 'origin/master'

client/package.json

@@ -49,6 +49,8 @@
     "diagram-js": "^12.3.0",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
+    "echarts-gl": "^1.1.2",
+    "echarts-liquidfill": "^2.0.6",
     "element-plus": "2.3.14",
     "fast-xml-parser": "^4.3.0",
     "highlight.js": "^11.8.0",
@@ -150,4 +152,4 @@
     "node": ">= 16.0.0",
     "pnpm": ">=8.6.0"
   }
-}
+}

client/src/views/OaSystem/oaViews/components/cardViewLone.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="card-view">
+    <div class="card-title">
+      <div class="title-left">
+        <p>{{ props.title }}</p>
+      </div>
+      <div class="title-right">
+        <ul v-if="props.topTabs">
+          <li
+            v-for="(item, index) in props.topTabs"
+            :key="index"
+            :class="index == topTabsIndex ? 'liActive' : ''"
+            @click="topTabsClick(item, index)"
+          >
+            <p>{{ item }}</p>
+          </li>
+        </ul>
+        <el-select
+          v-if="topTabsYear"
+          v-model="yearModel"
+          class="m-2"
+          placeholder="选择年份"
+          style="width: 100px"
+        >
+          <el-option
+            v-for="item in yearOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="tabs-Box" v-if="initTabsShow()">
+      <div class="tabs-left">
+        <ul v-if="props.leftTabs">
+          <el-radio-group v-model="radioModel" @change="radioGroupChange">
+            <el-radio
+              v-for="(item, index) in props.leftTabs"
+              :label="index"
+              :key="index"
+              size="large"
+              >{{ item }}</el-radio
+            >
+          </el-radio-group>
+        </ul>
+      </div>
+      <div class="tabs-right">
+        <ul v-if="props.rightTabs">
+          <li
+            v-for="(item, index) in props.rightTabs"
+            :key="index"
+            :class="index == rightTabsIndex ? 'liActive' : ''"
+            @click="rightTabsClick(item, index)"
+          >
+            <p>{{ item }}</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="card-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  leftTabs: Array,
+  rightTabs: Array,
+  topTabs: Array,
+  topTabsYear: Boolean
+})
+const emit = defineEmits(['leftClick', 'rightClick', 'topClick'])
+const yearOptions = ref([
+  {
+    label: '2024',
+    value: '2024'
+  },
+  {
+    label: '2023',
+    value: '2023'
+  },
+  {
+    label: '2022',
+    value: '2022'
+  }
+])
+const yearModel = ref('2024')
+const radioModel = ref(0)
+const rightTabsIndex = ref(0)
+const topTabsIndex = ref(0)
+const initTabsShow = () => {
+  if (props.leftTabs || props.rightTabs) {
+    return true
+  } else {
+    return false
+  }
+}
+const rightTabsClick = (item, index) => {
+  rightTabsIndex.value = index
+  emit('rightClick', index)
+}
+
+const topTabsClick = (item, index) => {
+  topTabsIndex.value = index
+  emit('topClick', index)
+}
+const radioGroupChange = (v) => {
+  emit('leftClick', props.leftTabs[v])
+}
+
+/** 初始化 **/
+onMounted(() => {
+  initTabsShow()
+})
+</script>
+<style lang="scss" scoped>
+p,
+span,
+h4,
+h5,
+h6 {
+  font-family: AlibabaPuHuiTiR;
+}
+.card-view {
+  width: 100%;
+  height: auto;
+
+  .card-title {
+    width: 100%;
+    height: 46px;
+    background: url(@/assets/imgs/oaView/card-title-lone.png) no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 45px;
+    .title-left {
+      p {
+        color: #fff;
+        font-size: 20px;
+        font-family: AlibabaPuHuiTiB;
+        font-weight: 600;
+        color: #ffffff;
+        background: linear-gradient(0deg, #ffff 20%, #def1ff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-top: 8px;
+      }
+    }
+    .title-right {
+      margin-top: 8px;
+      height: 100%;
+      ul {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        li {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 64px;
+          height: 24px;
+          border: 2px solid #0d6795;
+          background-color: transparent;
+          cursor: pointer;
+          margin-right: 5px;
+          p {
+            color: #7ac1ec;
+            font-size: 16px;
+          }
+        }
+        li:last-child {
+          margin-right: 0;
+        }
+        .liActive {
+          background-color: #29a4e4;
+          p {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .tabs-Box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    height: 40px;
+    padding-right: 0;
+    .tabs-left {
+      ul {
+        display: flex;
+        align-items: center;
+        li {
+        }
+      }
+    }
+    .tabs-right {
+      ul {
+        display: flex;
+        align-items: center;
+        li {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 24px;
+          border: 2px solid #0d6795;
+          background-color: transparent;
+          cursor: pointer;
+          margin-right: 5px;
+          padding: 0 4px;
+          p {
+            color: #7ac1ec;
+            font-size: 16px;
+            white-space: nowrap;
+          }
+        }
+        li:last-child {
+          margin-right: 0;
+        }
+        .liActive {
+          background-color: #29a4e4;
+          p {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .card-content {
+    width: 100%;
+    height: calc(100% - 86px);
+  }
+}
+:deep(.tabs-left) {
+  .el-radio__label {
+    color: #7ac1ec;
+    font-size: 16px;
+    font-family: AlibabaPuHuiTiR;
+  }
+  .el-radio {
+    margin-right: 15px;
+  }
+}
+:deep(.title-right) {
+  .el-select {
+    .el-input {
+    }
+    .el-input__wrapper {
+      background-color: transparent;
+      border-radius: 0;
+      border-color: #0d6795 !important;
+    }
+    input,
+    span {
+      color: #fff;
+    }
+  }
+}
+</style>

client/src/views/OaSystem/oaViews/financeView/mapView/mapView.vue

@@ -1,13 +1,98 @@
 <template>
   <div class="map-view-com">
-    <div class="map-chart">
-      <MapChart />
-    </div>
+    <CardViewLone
+      class="CardViewC1"
+      :title="'现金收入'"
+      :topTabsYear="true"
+      @topYearClick="topClick1"
+    >
+      <div class="cardBox">
+        <div class="infoBox">
+          <div class="cardT">
+            <div class="cardT1">
+              <img src="@/assets/imgs/oaView/ljsr.png" />
+              <p>开票金额</p>
+            </div>
+            <div class="cardT2">
+              <div class="cardT2L">
+                <div v-for="(l, i) in kpjeValue" :key="i">
+                  <p>{{ l }}</p>
+                </div>
+              </div>
+              <span>万元</span>
+            </div>
+          </div>
+          <div class="cardT">
+            <div class="cardT1">
+              <img src="@/assets/imgs/oaView/ljsr.png" />
+              <p>应收账款</p>
+            </div>
+            <div class="cardT2">
+              <div class="cardT2L">
+                <div v-for="(l, i) in yszkValue" :key="i">
+                  <p>{{ l }}</p>
+                </div>
+              </div>
+              <span>万元</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CardViewLone>
+    <CardViewLone
+      class="CardViewC2"
+      :title="'成本预算、支出'"
+      :topTabs="['总览', '按板块']"
+      @topClick="topClick2"
+    >
+      <div class="cardBox">
+        <div class="infoBox">
+          <div class="cardT">
+            <div class="cardT1">
+              <img src="@/assets/imgs/oaView/ljsr.png" />
+              <p>预算规模</p>
+            </div>
+            <div class="cardT2">
+              <div class="cardT2L">
+                <div v-for="(l, i) in ysgmValue" :key="i">
+                  <p>{{ l }}</p>
+                </div>
+              </div>
+              <span>万元</span>
+            </div>
+          </div>
+          <div class="cardT">
+            <div class="cardT1">
+              <img src="@/assets/imgs/oaView/ljsr.png" />
+              <p>累计支出</p>
+            </div>
+            <div class="cardT2">
+              <div class="cardT2L">
+                <div v-for="(l, i) in ljzcValue" :key="i">
+                  <p>{{ l }}</p>
+                </div>
+              </div>
+              <span>万元</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CardViewLone>
   </div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import MapChart from './mapChart.vue'
+import CardViewLone from '../../components/cardViewLone.vue'
+const kpjeValue = ref('14562')
+const yszkValue = ref('14562')
+const ysgmValue = ref('1456')
+const ljzcValue = ref('1456')
+const topClick1 = (value) => {
+  console.log(value)
+}
+const topClick2 = (value) => {
+  console.log(value)
+}
 
 /** 初始化 **/
 onMounted(() => {})
@@ -17,10 +102,127 @@ onMounted(() => {})
 
 .map-view-com {
   position: relative;
-
+  padding: 0 80px;
   .map-chart {
     width: 100%;
     height: calc(100% - 100px);
   }
+
+  .CardViewC1 {
+    height: 60%;
+    .cardBox {
+      height: calc(100% + 36px);
+      padding: 10px;
+      .infoBox {
+        padding: 0 20px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .cardT {
+          width: calc(50% - 30px);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .cardT1 {
+            display: flex;
+            align-items: center;
+            img {
+              margin-right: 10px;
+            }
+            p {
+              font-size: 18px;
+            }
+          }
+          .cardT2 {
+            display: flex;
+            align-items: center;
+            .cardT2L {
+              display: flex;
+              align-items: center;
+              div {
+                width: 26px;
+                height: 34px;
+                background: rgba(11, 84, 153, 0.53);
+                border: 1px solid #1282bd;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 0 2px;
+                p {
+                  color: #29d2e4;
+                  font-family: AlibabaPuHuiTiB;
+                  font-size: 24px;
+                }
+              }
+            }
+            span {
+              color: #29d2e4;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .CardViewC2 {
+    height: 40%;
+    .cardBox {
+      height: calc(100% + 36px);
+      padding: 10px;
+      .infoBox {
+        padding: 0 20px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .cardT {
+          width: calc(50% - 30px);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .cardT1 {
+            display: flex;
+            align-items: center;
+            img {
+              margin-right: 10px;
+            }
+            p {
+              font-size: 18px;
+            }
+          }
+          .cardT2 {
+            display: flex;
+            align-items: center;
+            .cardT2L {
+              display: flex;
+              align-items: center;
+              div {
+                width: 26px;
+                height: 34px;
+                background: rgba(11, 84, 153, 0.53);
+                border: 1px solid #1282bd;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 0 2px;
+                p {
+                  color: #29d2e4;
+                  font-family: AlibabaPuHuiTiB;
+                  font-size: 24px;
+                }
+              }
+            }
+            span {
+              color: #29d2e4;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

client/src/views/OaSystem/oaViews/marketView/mapView/mapChart.vue

@@ -1,12 +1,163 @@
 <template>
-  <div class="w-100% h-100%" id="myChart4"></div>
+  <div class="w-100% h-100%" id="myChart5"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import China from '@/assets/json/china.json'
+
 const initChart = () => {
-  let myChart = echarts.init(document.getElementById('myChart4'))
-  let option = {}
+  let myChart = echarts.init(document.getElementById('myChart5'))
+  var geoCoordMap = {
+    上海: [119.1803, 31.2891],
+    福建: [119.4543, 25.9222],
+    重庆: [108.384366, 30.439702],
+    北京: [116.4551, 40.2539],
+    辽宁: [123.1238, 42.1216],
+    河北: [114.4995, 38.1006],
+    天津: [117.4219, 39.4189],
+    山西: [112.3352, 37.9413],
+    陕西: [109.1162, 34.2004],
+    甘肃: [103.5901, 36.3043],
+    宁夏: [106.3586, 38.1775],
+    青海: [101.4038, 36.8207],
+    新疆: [87.9236, 43.5883],
+    西藏: [91.11, 29.97],
+    四川: [103.9526, 30.7617],
+    吉林: [125.8154, 44.2584],
+    山东: [117.1582, 36.8701],
+    河南: [113.4668, 34.6234],
+    江苏: [118.8062, 31.9208],
+    安徽: [117.29, 32.0581],
+    湖北: [114.3896, 30.6628],
+    浙江: [119.5313, 29.8773],
+    内蒙古: [110.3467, 41.4899],
+    江西: [116.0046, 28.6633],
+    湖南: [113.0823, 28.2568],
+    贵州: [106.6992, 26.7682],
+    云南: [102.9199, 25.4663],
+    广东: [113.12244, 23.009505],
+    广西: [108.479, 23.1152],
+    海南: [110.3893, 19.8516],
+    黑龙江: [127.9688, 45.368],
+    台湾: [121.4648, 25.563]
+  }
+  var chinaDatas = [
+    {
+      name: '北京',
+      value: 86
+    },
+
+    {
+      name: '江苏',
+      value: 24
+    },
+
+    {
+      name: '浙江',
+      value: 15
+    }
+  ]
+  let domImg = '/src/assets/imgs/oaView/bg-map.png'
+  var convertData = function (data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name]
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        })
+      }
+    }
+    return res
+  }
+  //初始化元素
+  echarts.registerMap('china', China as any)
+  let option = {
+    geo: {
+      show: true,
+      map: 'china',
+      zoom: 1.2,
+      layoutCenter: ['50%', '60%'], //地图位置
+      layoutSize: '100%',
+      // roam: true, //是否开启平游或缩放
+      scaleLimit: {
+        //滚轮缩放的极限控制
+        min: 1,
+        max: 2
+      },
+
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      roam: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 2,
+          borderColor: '#0A8EE8',
+          shadowColor: 'rgba(3,221,255,0.8)',
+          areaColor: {
+            type: 'pattern',
+            image: domImg, //配置图片
+            repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        z: 10,
+        data: convertData(
+          chinaDatas.sort(function (a, b) {
+            return b.value - a.value
+          })
+        ),
+        symbolSize: 20,
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        label: {
+          normal: {
+            show: true,
+            formatter: function (params) {
+              return '{fline|' + ' ' + params.data.name + ' ' + params.value[2] + '}'
+            },
+            position: 'left',
+            distance: 10,
+            backgroundColor: 'rgba(3,219,255,.8)',
+            padding: [0, 0],
+            borderRadius: 3,
+            lineHeight: 24,
+            verticalAlign: 'middle',
+            color: '#fff',
+            z: 11,
+            rich: {
+              fline: {
+                padding: [0, 10],
+                color: '#ffffff'
+              }
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(3,219,255,1)',
+            shadowBlur: 8
+          }
+        }
+      }
+    ]
+  }
+
   myChart.setOption(option)
 }
 /** 初始化 **/

client/src/views/OaSystem/oaViews/marketView/mapView/mapView.vue

@@ -8,7 +8,7 @@
         <li v-for="(item, index) in infoShowList" :key="index">
           <p>{{ item.name }}</p>
           <h4 :style="{ color: item.color }"
-            >{{ item.value }} <span :style="{ color: item.color }">万元</span>
+            >{{ item.value }} <span :style="{ color: item.color }">亿元</span>
           </h4>
         </li>
       </ul>
@@ -22,17 +22,17 @@ import MapChart from './mapChart.vue'
 const infoShowList = ref([
   {
     name: '合同签约',
-    value: '333.00',
+    value: '2.0601',
     color: '#3AAEFF'
   },
   {
     name: '新开拓',
-    value: '333.00',
+    value: '1.9601',
     color: '#00D488'
   },
   {
     name: '回款',
-    value: '333.00',
+    value: '1.588',
     color: '#E4A306'
   }
 ])

client/src/views/OaSystem/oaViews/personnelView/mapView/mapChart.vue

@@ -1,12 +1,168 @@
 <template>
-  <div class="w-100% h-100%" id="myChart4"></div>
+  <div class="w-100% h-100%" id="myChart5"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import China from '@/assets/json/china.json'
+
 const initChart = () => {
-  let myChart = echarts.init(document.getElementById('myChart4'))
-  let option = {}
+  let myChart = echarts.init(document.getElementById('myChart5'))
+  var geoCoordMap = {
+    上海: [119.1803, 31.2891],
+    福建: [119.4543, 25.9222],
+    重庆: [108.384366, 30.439702],
+    北京: [116.4551, 40.2539],
+    辽宁: [123.1238, 42.1216],
+    河北: [114.4995, 38.1006],
+    天津: [117.4219, 39.4189],
+    山西: [112.3352, 37.9413],
+    陕西: [109.1162, 34.2004],
+    甘肃: [103.5901, 36.3043],
+    宁夏: [106.3586, 38.1775],
+    青海: [101.4038, 36.8207],
+    新疆: [87.9236, 43.5883],
+    西藏: [91.11, 29.97],
+    四川: [103.9526, 30.7617],
+    吉林: [125.8154, 44.2584],
+    山东: [117.1582, 36.8701],
+    河南: [113.4668, 34.6234],
+    江苏: [118.8062, 31.9208],
+    安徽: [117.29, 32.0581],
+    湖北: [114.3896, 30.6628],
+    浙江: [119.5313, 29.8773],
+    内蒙古: [110.3467, 41.4899],
+    江西: [116.0046, 28.6633],
+    湖南: [113.0823, 28.2568],
+    贵州: [106.6992, 26.7682],
+    云南: [102.9199, 25.4663],
+    广东: [113.12244, 23.009505],
+    广西: [108.479, 23.1152],
+    海南: [110.3893, 19.8516],
+    黑龙江: [127.9688, 45.368],
+    台湾: [121.4648, 25.563]
+  }
+  var chinaDatas = [
+    {
+      name: '北京',
+      value: 10
+    },
+
+    {
+      name: '江苏',
+      value: 86
+    },
+
+    {
+      name: '浙江',
+      value: 183
+    }
+  ]
+  let domImg = '/src/assets/imgs/oaView/bg-map.png'
+  let labelImg = '/src/assets/imgs/oaView/labelImg.png'
+  labelImg
+  var convertData = function (data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name]
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        })
+      }
+    }
+    return res
+  }
+  //初始化元素
+  echarts.registerMap('china', China as any)
+  let option = {
+    geo: {
+      show: true,
+      map: 'china',
+      zoom: 1.2,
+      layoutCenter: ['50%', '60%'], //地图位置
+      layoutSize: '100%',
+      // roam: true, //是否开启平游或缩放
+      scaleLimit: {
+        //滚轮缩放的极限控制
+        min: 1,
+        max: 2
+      },
+
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      roam: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 2,
+          borderColor: '#0A8EE8',
+          shadowColor: 'rgba(3,221,255,0.8)',
+          areaColor: {
+            type: 'pattern',
+            image: domImg, //配置图片
+            repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        z: 10,
+        data: convertData(
+          chinaDatas.sort(function (a, b) {
+            return b.value - a.value
+          })
+        ),
+        symbolSize: 20,
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        label: {
+          normal: {
+            show: true,
+            formatter: function (params) {
+              return '{fline|' + ' ' + params.data.name + ' ' + params.value[2] + '人' + '}'
+            },
+            position: 'left',
+            distance: 10,
+            backgroundColor: {
+              image: labelImg // 设置背景图片路径
+            },
+            padding: [0, 0],
+            borderRadius: 3,
+            lineHeight: 24,
+            verticalAlign: 'middle',
+            color: '#fff',
+            z: 11,
+            rich: {
+              fline: {
+                padding: [0, 10],
+                color: '#ffffff',
+                fontFamily: 'AlibabaPuHuiTiR'
+              }
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(3,219,255,1)',
+            shadowBlur: 8
+          }
+        }
+      }
+    ]
+  }
+
   myChart.setOption(option)
 }
 /** 初始化 **/

client/src/views/OaSystem/oaViews/produceView/mapView/mapChart.vue

@@ -1,12 +1,168 @@
 <template>
-  <div class="w-100% h-100%" id="myChart4"></div>
+  <div class="w-100% h-100%" id="myChart5"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import China from '@/assets/json/china.json'
+
 const initChart = () => {
-  let myChart = echarts.init(document.getElementById('myChart4'))
-  let option = {}
+  let myChart = echarts.init(document.getElementById('myChart5'))
+  var geoCoordMap = {
+    上海: [119.1803, 31.2891],
+    福建: [119.4543, 25.9222],
+    重庆: [108.384366, 30.439702],
+    北京: [116.4551, 40.2539],
+    辽宁: [123.1238, 42.1216],
+    河北: [114.4995, 38.1006],
+    天津: [117.4219, 39.4189],
+    山西: [112.3352, 37.9413],
+    陕西: [109.1162, 34.2004],
+    甘肃: [103.5901, 36.3043],
+    宁夏: [106.3586, 38.1775],
+    青海: [101.4038, 36.8207],
+    新疆: [87.9236, 43.5883],
+    西藏: [91.11, 29.97],
+    四川: [103.9526, 30.7617],
+    吉林: [125.8154, 44.2584],
+    山东: [117.1582, 36.8701],
+    河南: [113.4668, 34.6234],
+    江苏: [118.8062, 31.9208],
+    安徽: [117.29, 32.0581],
+    湖北: [114.3896, 30.6628],
+    浙江: [119.5313, 29.8773],
+    内蒙古: [110.3467, 41.4899],
+    江西: [116.0046, 28.6633],
+    湖南: [113.0823, 28.2568],
+    贵州: [106.6992, 26.7682],
+    云南: [102.9199, 25.4663],
+    广东: [113.12244, 23.009505],
+    广西: [108.479, 23.1152],
+    海南: [110.3893, 19.8516],
+    黑龙江: [127.9688, 45.368],
+    台湾: [121.4648, 25.563]
+  }
+  var chinaDatas = [
+    {
+      name: '北京',
+      value: 10
+    },
+
+    {
+      name: '江苏',
+      value: 86
+    },
+
+    {
+      name: '浙江',
+      value: 183
+    }
+  ]
+  let domImg = '/src/assets/imgs/oaView/bg-map.png'
+  let labelImg = '/src/assets/imgs/oaView/labelImg.png'
+  labelImg
+  var convertData = function (data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name]
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        })
+      }
+    }
+    return res
+  }
+  //初始化元素
+  echarts.registerMap('china', China as any)
+  let option = {
+    geo: {
+      show: true,
+      map: 'china',
+      zoom: 1.2,
+      layoutCenter: ['50%', '60%'], //地图位置
+      layoutSize: '100%',
+      // roam: true, //是否开启平游或缩放
+      scaleLimit: {
+        //滚轮缩放的极限控制
+        min: 1,
+        max: 2
+      },
+
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      roam: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 2,
+          borderColor: '#0A8EE8',
+          shadowColor: 'rgba(3,221,255,0.8)',
+          areaColor: {
+            type: 'pattern',
+            image: domImg, //配置图片
+            repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        z: 10,
+        data: convertData(
+          chinaDatas.sort(function (a, b) {
+            return b.value - a.value
+          })
+        ),
+        symbolSize: 20,
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        label: {
+          normal: {
+            show: true,
+            formatter: function (params) {
+              return '{fline|' + ' ' + params.data.name + ' ' + params.value[2] + '人' + '}'
+            },
+            position: 'left',
+            distance: 10,
+            backgroundColor: {
+              image: labelImg // 设置背景图片路径
+            },
+            padding: [0, 0],
+            borderRadius: 3,
+            lineHeight: 24,
+            verticalAlign: 'middle',
+            color: '#fff',
+            z: 11,
+            rich: {
+              fline: {
+                padding: [0, 10],
+                color: '#ffffff',
+                fontFamily: 'AlibabaPuHuiTiR'
+              }
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(3,219,255,1)',
+            shadowBlur: 8
+          }
+        }
+      }
+    ]
+  }
+
   myChart.setOption(option)
 }
 /** 初始化 **/