feat：完善首页功能

2025-01-10 18:07:31 +08:00
parent 9ee304c8c2
commit 880db48579
18 changed files with 618 additions and 364 deletions
--- a/src/views/home/components/jam-count.vue
+++ b/src/views/home/components/jam-count.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="jam-count" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  const { id, setOption } = useEchart()
+
+  var colorList = ['#FDC40A', '#FF5232', '#50F0A6']
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) init()
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const setSeriesData = () => {
+    return props.list.map((item) => {
+      return {
+        name: item.name,
+        value: parseFloat(item.count)
+      }
+    })
+  }
+  const calcCount = () => {
+    return props.list.reduce((total, currentValue) => {
+      return total + parseFloat(currentValue.count)
+    }, 0)
+  }
+  const init = () => {
+    setOption({
+      color: colorList,
+      grid: {
+        left: '4%',
+        right: '4%',
+        top: '4%',
+        bottom: '4%',
+        containLabel: true
+      },
+      legend: {
+        orient: 'horizontal',
+        x: 'center',
+        bottom: '-2%',
+        itemHeight: fitChartSize(16),
+        itemWidth: fitChartSize(16),
+        itemGap: fitChartSize(10),
+        formatter: (name) => {
+          let obj = props.list.find((item) => item.name == name)
+          return '{name|' + name + '} {value|' + obj?.count + '}{value|%}'
+        },
+        textStyle: {
+          rich: {
+            name: {
+              color: '#fff',
+              fontSize: fitChartSize(12)
+            },
+            value: {
+              color: '#00D5F6',
+              fontSize: fitChartSize(12)
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          center: ['50%', '40%'],
+          radius: ['45%', '60%'],
+          itemStyle: {
+            borderWidth: fitChartSize(4),
+            borderColor: '#093672'
+          },
+          label: {
+            show: true,
+            position: 'center',
+            fontWeight: 'bold',
+            formatter: function (o) {
+              return `{label|拥堵次数}` + '\n' + `{value|${calcCount()}}`
+            },
+            rich: {
+              label: {
+                color: '#7894A8',
+                padding: [0, 0, 5, 0],
+                fontSize: fitChartSize(12)
+              },
+              value: {
+                color: '#fff',
+                fontSize: fitChartSize(18),
+                fontWeight: 'bold'
+              }
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: setSeriesData()
+        }
+      ]
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss">
+  .jam-count {
+    width: vw(250);
+    height: vh(150);
+  }
+</style>