feat: 新增地图组件

src/views/centerLeft1/chart/draw.tsx

@@ -54,9 +54,21 @@ export default defineComponent({
             {
               name: '通过率统计',
               type: 'pie',
-              radius: [10, 60],
+              radius: [10, 55],
               roseType: 'area',
               center: ['50%', '40%'],
+              itemStyle: {
+                borderRadius: 5
+              },
+              label: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                label: {
+                  show: false
+                }
+              },
               data: val.seriesData
             }
           ]
@@ -71,7 +83,7 @@ export default defineComponent({
     return () => {
       const height = "220px"
       const width = "260px"
-      
+
       return <div>
         <echart options={options} height={height} width={width} />
       </div>

src/views/centerLeft1/chart/index.tsx

@@ -7,14 +7,14 @@ export default defineComponent({
   },
   setup() {
     const cdata = reactive({
-      xData: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6'],
+      xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
       seriesData: [
-        { value: 10, name: 'rose1' },
-        { value: 5, name: 'rose2' },
-        { value: 15, name: 'rose3' },
-        { value: 25, name: 'rose4' },
-        { value: 20, name: 'rose5' },
-        { value: 35, name: 'rose6' }
+        { value: 10, name: '数据1' },
+        { value: 5, name: '数据2' },
+        { value: 15, name: '数据3' },
+        { value: 25, name: '数据4' },
+        { value: 20, name: '数据5' },
+        { value: 35, name: '数据6' }
       ]
     })
 

src/views/centerLeft1/index.vue

@@ -3,7 +3,7 @@
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
-          <icon class="iconfont icon-tongji4"></icon>
+          <icon class="iconfont icon-tongji4" />
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">任务通过率</span>
@@ -104,7 +104,7 @@ $box-height: 410px;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    height: $box-height - 20px;
+    height: $box-height - 30px;
     border-radius: 10px;
   }
   .text {

src/views/centerLeft2/chart/draw.tsx

@@ -0,0 +1,292 @@
+import { defineComponent, watch, shallowReactive, nextTick, ref, onUnmounted } from 'vue';
+
+// 声明类型
+const PropsType = {
+  cdata: {
+    type: Array,
+    default: () => [],
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 定时器
+    // let intervalId = 0
+    // 地图选择
+    // let preSelectMapIndex = 0
+    // ref
+    const chartRef = ref()
+    // 配置项
+    let options = shallowReactive({})
+    // 设置点的位置(经纬度)
+    const geoCoordMap = {
+      厦门市: [118.11022, 24.490474, 20],
+      福州市: [119.206239, 26.275302, 20],
+      泉州市: [118.589421, 24.908853, 20],
+      漳州市: [117.561801, 24.510897, 20],
+      龙岩市: [116.82978, 25.391603, 20],
+      莆田市: [119.007558, 25.591011, 20],
+      三明市: [117.435001, 26.465444, 20],
+      南平市: [118.178459, 27.535627, 20],
+      宁德市: [119.527082, 27.15924, 20],
+    }
+    const seriesData = [
+      {
+        name: '厦门市',
+      },
+      {
+        name: '福州市',
+      },
+      {
+        name: '泉州市',
+      },
+      {
+        name: '漳州市',
+      },
+      {
+        name: '龙岩市',
+      },
+      {
+        name: '莆田市',
+      },
+      {
+        name: '三明市',
+      },
+      {
+        name: '南平市',
+      },
+      {
+        name: '宁德市',
+      },
+    ]
+    const convertData = function (data) {
+      const scatterData = [];
+      for (let i = 0; i < data.length; i++) {
+        const geoCoord = geoCoordMap[data[i].name];
+        if (geoCoord) {
+          scatterData.push({
+            name: data[i].name,
+            value: geoCoord.concat(data[i].value),
+          });
+        }
+      }
+      return scatterData;
+    }
+    // 重新随机选中地图区域
+    // const reSelectMapRandomArea = () => {
+    //   const length = 9;
+    //   nextTick(() => {
+    //     const map = chartRef.value;
+    //     let index = Math.floor(Math.random() * length);
+    //     while (index === preSelectMapIndex || index >= length) {
+    //       index = Math.floor(Math.random() * length);
+    //     }
+    //     if (map.dispatchAction) {
+    //       map.dispatchAction({
+    //         type: 'mapUnSelect',
+    //         seriesIndex: 0,
+    //         dataIndex: preSelectMapIndex,
+    //       });
+    //       map.dispatchAction({
+    //         type: 'showTip',
+    //         seriesIndex: 0,
+    //         dataIndex: index,
+    //       });
+    //       map.dispatchAction({
+    //         type: 'mapSelect',
+    //         seriesIndex: 0,
+    //         dataIndex: index,
+    //       });
+    //       preSelectMapIndex = index;
+    //     }
+    //   });
+    // }
+    // const handleMapRandomSelect = () => {
+    //   nextTick(() => {
+    //     const map = chartRef.value;
+    //     setTimeout(() => {
+    //       reSelectMapRandomArea();
+    //     }, 0);
+    //     // 移入区域，清除定时器、取消之前选中并选中当前
+    //     if (map.on) {
+    //       map.on('mouseover', function (params) {
+    //         clearInterval(intervalId);
+    //         if (map.dispatchAction) {
+    //           map.dispatchAction({
+    //             type: 'mapUnSelect',
+    //             seriesIndex: 0,
+    //             dataIndex: preSelectMapIndex,
+    //           });
+    //           map.dispatchAction({
+    //             type: 'mapSelect',
+    //             seriesIndex: 0,
+    //             dataIndex: params.dataIndex,
+    //           });
+    //           preSelectMapIndex = params.dataIndex;
+    //         }
+    //       });
+    //     }
+    //     // 移出区域重新随机选中地图区域，并开启定时器
+    //     if (map.on) {
+    //       map.on('globalout', function () {
+    //         reSelectMapRandomArea();
+    //         startInterval();
+    //       });
+    //       startInterval();
+    //     }
+    //   });
+    // }
+    // 开启定时器
+    // const startInterval = () => {
+    //   // 应通过接口获取配置时间，暂时写死5s
+    //   const time = 2000;
+    //   intervalId = setInterval(() => {
+    //     reSelectMapRandomArea();
+    //   }, time);
+    // }
+    // 监听
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          showLegendSymbol: true,
+          tooltip: {
+            trigger: 'item',
+            textStyle: {
+              fontSize: 14,
+              lineHeight: 22,
+            },
+            position: point => {
+              // 固定在顶部
+              return [point[0] + 50, point[1] - 20];
+            },
+            // 如果需要自定义 tooltip样式，需要使用formatter
+            /*
+              formatter: params => {
+                return `<div style=""> ... </div>`
+              }
+            */
+          },
+          visualMap: {
+            min: 0,
+            max: 10,
+            show: false,
+            seriesIndex: 0,
+            // 颜色
+            inRange: {
+              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
+            },
+          },
+          // 底部背景
+          geo: {
+            show: true,
+            aspectScale: 0.85, //长宽比
+            zoom: 1.2,
+            top: '10%',
+            left: '16%',
+            map: '福建',
+            roam: false,
+            itemStyle: {
+              normal: {
+                areaColor: 'rgba(0,0,0,0)',
+                shadowColor: 'rgba(7,114,204, .8)',
+                shadowOffsetX: 5,
+                shadowOffsetY: 5,
+              },
+              emphasis: {
+                areaColor: '#00aeef',
+              },
+            },
+          },
+          series: [
+            {
+              name: '相关指数',
+              type: 'map',
+              aspectScale: 0.85, //长宽比
+              zoom: 1.2,
+              mapType: '福建', // 自定义扩展图表类型
+              top: '10%',
+              left: '16%',
+              itemStyle: {
+                normal: {
+                  color: 'red',
+                  areaColor: 'rgba(19,54,162, .5)',
+                  borderColor: 'rgba(0,242,252,.3)',
+                  borderWidth: 1,
+                  shadowBlur: 7,
+                  shadowColor: '#00f2fc',
+                },
+                emphasis: {
+                  areaColor: '#4f7fff',
+                  borderColor: 'rgba(0,242,252,.6)',
+                  borderWidth: 2,
+                  shadowBlur: 10,
+                  shadowColor: '#00f2fc',
+                },
+              },
+              label: {
+                formatter: params => `${params.name}`,
+                show: true,
+                position: 'insideRight',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#efefef',
+                },
+                emphasis: {
+                  textStyle: {
+                    color: '#fff',
+                  },
+                },
+              },
+              data: val,
+            },
+            {
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              symbolSize: 7,
+              effectType: 'ripple',
+              legendHoverLink: false,
+              showEffectOn: 'render',
+              rippleEffect: {
+                period: 4,
+                scale: 2.5,
+                brushType: 'stroke',
+              },
+              zlevel: 1,
+              itemStyle: {
+                normal: {
+                  color: '#99FBFE',
+                  shadowBlur: 5,
+                  shadowColor: '#fff',
+                },
+              },
+              data: convertData(seriesData),
+            },
+          ],
+        }
+        // 重新选择区域
+        // handleMapRandomSelect();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    // 销毁
+    // onUnmounted(() => {
+    //   clearInterval(intervalId)
+    // })
+    return () => {
+      const height = "360px"
+      const width = "330px"
+
+      return <div>
+        <echart ref={chartRef} options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

src/views/centerLeft2/chart/index.tsx

@@ -0,0 +1,58 @@
+import { defineComponent, reactive } from 'vue'
+import Draw from './draw'
+
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const cdata = reactive([
+      {
+        // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
+        name: '福州市',
+        value: 10,
+        elseData: {
+          // 这里放置地图 tooltip 里想显示的数据
+        }
+      },
+      {
+        name: '厦门市',
+        value: 9,
+      },
+      {
+        name: '漳州市',
+        value: 8,
+      },
+      {
+        name: '泉州市',
+        value: 7,
+      },
+      {
+        name: '三明市',
+        value: 6,
+      },
+      {
+        name: '莆田市',
+        value: 5,
+      },
+      {
+        name: '南平市',
+        value: 4,
+      },
+      {
+        name: '龙岩市',
+        value: 3,
+      },
+      {
+        name: '宁德市',
+        value: 2,
+      }
+    ])
+
+    return () => {
+      return <div>
+        <Draw cdata={cdata} />
+      </div>
+    }
+  }
+})

src/views/centerLeft2/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon class="iconfont icon-layer-group"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">地图数据</span>
+          <dv-decoration-1 class="dv-dec-1" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Chart from './chart/index'
+export default defineComponent({
+  components: {
+    Chart
+  }
+})
+</script>
+
+<style lang="scss">
+#centreLeft1 {
+  $box-width: 300px;
+  $box-height: 410px;
+  padding: 16px;
+  height: $box-height;
+  min-width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .dv-dec-1 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -59,7 +59,7 @@
             </div>
             <div>
               <dv-border-box-12>
-                <!-- <centerLeft2 /> -->
+                <centerLeft2 />
               </dv-border-box-12>
             </div>
             <!-- 中间 -->
@@ -99,10 +99,12 @@ import { WEEK } from '@/constant/index'
 import useIndex from '@/utils/useDraw'
 import { title, subtitle, moduleInfo } from '@/constant/index'
 import CenterLeft1 from "../centerLeft1/index.vue";
+import CenterLeft2 from "../centerLeft2/index.vue";
 
 export default defineComponent({
   components: {
     CenterLeft1,
+    CenterLeft2
   },
   setup() {
     // * 加载标识