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-duration.vue
+++ b/src/views/home/components/jam-duration.vue
@@ -0,0 +1,195 @@
+<template>
+  <!-- 拥堵时长 -->
+  <div class="jam" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) init()
+    },
+    { immediate: true }
+  )
+
+  let params = null
+
+  const setSeriesData = () => {
+    return props.list.map((item) => {
+      return {
+        name: item.name,
+        value: item.count,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(255, 112, 33, 0)'
+              },
+              {
+                offset: 1,
+                color: '#FF7021'
+              }
+            ]
+          }
+        }
+      }
+    })
+  }
+  const setScatterData = () => {
+    return props.list.map((item) => {
+      return {
+        name: item.name,
+        value: item.count,
+        itemStyle: {
+          color: '#fff',
+          opacity: 1
+        }
+      }
+    })
+  }
+  const setYAxisData = () => {
+    return props.list.map((item) => item.count)
+  }
+  const init = () => {
+    if (!params) {
+      params = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          show: false
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '16%',
+          bottom: '-10%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            show: false
+          }
+        ],
+        yAxis: [
+          {
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            data: [],
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontSize: fitChartSize(12)
+              },
+              verticalAlign: 'bottom',
+              padding: [0, 0, 6, 0],
+              inside: true,
+              formatter: function (value) {
+                return `{value|${value}}{value|分钟}`
+              },
+              rich: {
+                value: {
+                  align: 'center',
+                  color: '#fff',
+                  fontWeight: 600,
+                  fontSize: fitChartSize(14)
+                }
+              }
+            },
+            data: setYAxisData()
+          }
+        ],
+        series: [
+          {
+            name: '',
+            type: 'bar',
+            barWidth: fitChartSize(4),
+            showBackground: true,
+            barBorderRadius: [0, 0, 0, 0],
+            backgroundStyle: {
+              color: 'rgba(0, 150, 255, 0.15)'
+            },
+            label: {
+              show: true,
+              offset: [10, -10],
+              color: '#fff',
+              fontWeight: 500,
+              position: 'left',
+              align: 'left',
+              fontSize: fitChartSize(14),
+              formatter: function (params) {
+                return params.data.name
+              }
+            },
+            data: setSeriesData()
+          },
+          {
+            name: '外圆',
+            type: 'scatter',
+            emphasis: {
+              scale: false
+            },
+            showSymbol: true,
+            symbol: 'circle',
+            symbolSize: fitChartSize(10),
+            z: 2,
+            data: setScatterData(),
+            animationDelay: 500
+          }
+        ]
+      }
+    } else {
+      params.series[0].data = setSeriesData()
+      params.series[1].data = setScatterData()
+    }
+    setOption(params)
+  }
+</script>
+
+<style scoped lang="scss">
+  .jam {
+    width: vw(250);
+    height: vh(160);
+  }
+</style>