修改列表

src/views/home/components/map copy 2.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="h-full" ref="mapRef">12</div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useECharts } from '@/components/echarts/useECharts.js'
+import chinaMap from './xj.json'
+import { registerMap } from 'echarts'
+import http from '@/utils/request'
+
+const mapRef = ref(null)
+const { setOptions } = useECharts(mapRef)
+const data = ref([])
+
+registerMap('xj', { geoJSON: chinaMap })
+
+onMounted(() => {
+  getData()
+})
+
+const getData = async () => {
+  const resData = await http.get(
+    '/admin-api/api/cockpit/store-number-distribution'
+  )
+  data.value = resData
+  chatInit()
+}
+
+const convertData = (data) => {
+  var geoCoordMap = []
+  chinaMap.features.forEach((item) => {
+    geoCoordMap[item.properties.name] =
+      item.properties.centroid ?? item.properties.center
+    // if(item.properties.name=='河北省' ) console.log(item.properties.centroid)
+  })
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var geoCoord = geoCoordMap[data[i].name]
+    if (geoCoord && data[i].stores_count > 0) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].stores_count),
+      })
+    }
+  }
+  return res
+}
+
+const chatInit = () => {
+  var max = 480,
+    min = 14 // todo
+  var maxSize4Pin = 100,
+    minSize4Pin = 30
+
+  setOptions({
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        if (params.name == '南海诸岛') return ''
+
+        if (typeof params.value[2] == 'undefined') {
+          return params.name + ' : ' + params.value
+        } else {
+          return params.name + ' : ' + params.value[2]
+        }
+      },
+    },
+    geo: {
+      map: 'xj',
+      zoom: 1.2,
+      roam: false,
+      // left: '20%',
+      // top: '23%',
+      label: {
+        show: true,
+        color: 'rgb(249, 249, 249)', //省份标签字体颜色
+      },
+      itemStyle: {
+        areaColor: '#24CFF4',
+        borderColor: '#53D9FF',
+        borderWidth: 1.3,
+        shadowBlur: 15,
+        shadowColor: 'rgb(58,115,192)',
+        shadowOffsetX: 7,
+        shadowOffsetY: 6,
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: '#8dd7fc',
+          borderWidth: 1.6,
+          shadowBlur: 25,
+        },
+        label: {
+          show: true,
+          color: '#f75a00',
+        },
+      },
+    },
+    series: [
+      {
+        type: 'map',
+        map: 'china',
+        geoIndex: 0,
+        aspectScale: 0.75, //长宽比
+        showLegendSymbol: false, // 存在legend时显示
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              color: '#fff',
+            },
+          },
+        },
+        roam: true,
+        itemStyle: {
+          normal: {
+            areaColor: '#031525',
+            borderColor: '#FFFFFF',
+          },
+          emphasis: {
+            areaColor: '#2B91B7',
+          },
+        },
+        animation: false,
+        data: data.value.map((e) => {
+          return {
+            name: e.name,
+            value: e.stores_count,
+          }
+        }),
+      },
+      {
+        name: '点',
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        symbol: 'pin',
+        symbolSize: function (val) {
+          var a = (maxSize4Pin - minSize4Pin) / (max - min)
+          var b = minSize4Pin - a * min
+          b = maxSize4Pin - a * max
+          return a * val[2] + b
+        },
+        label: {
+          show: true,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+          },
+          formatter(value) {
+            if (typeof value.data.value[2] == 'undefined') {
+              return 0
+            }
+            return value.data.value[2] ?? 0
+          },
+        },
+        itemStyle: {
+          color: '#F62157',
+        },
+        zlevel: 6,
+        data: convertData(data.value),
+      },
+    ],
+  })
+}
+</script>

src/views/home/components/rank.vue

@@ -27,7 +27,7 @@ import { useECharts } from '@/components/echarts/useECharts.js'
 import echarts from '@/components/echarts/echarts.js'
 import http from '@/utils/request'
 
-const day = ref('365days')
+const day = ref('7days')
 const dayList = [
   {
     value: '7days',