feat：完善功能

2025-01-20 04:09:56 +08:00
parent 46c737fb93
commit 65244492b4
40 changed files with 2303 additions and 797 deletions
--- a/src/views/traffic/components/traffic-jam.vue
+++ b/src/views/traffic/components/traffic-jam.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="traffic-jam" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let props = defineProps({
+    series: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  watch(
+    () => props.series,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  let params = null
+
+  const getSeriesData = () => {
+    let colorMap = {
+      1: '#00C000',
+      2: '#FFA700',
+      3: '#FFO000',
+      4: '#B50000'
+    }
+    return props.series.map((item) => {
+      return {
+        value: item,
+        itemStyle: {
+          color: colorMap[item]
+        }
+      }
+    })
+  }
+  const getXAxisData = () => {
+    return props.data
+  }
+  const init = () => {
+    if (!params) {
+      params = {
+        grid: {
+          left: '8%',
+          right: '8%',
+          top: '10%',
+          bottom: '4%',
+          containLabel: true
+        },
+        xAxis: {
+          boundaryGap: false,
+          type: 'category',
+          data: getXAxisData(),
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(5, 72, 134, 1)'
+            }
+          },
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            show: false,
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(0, 150, 255,0.4)',
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            emphasis: {
+              opacity: 1
+            },
+            data: getSeriesData(),
+            barWidth: fitChartSize(40),
+            label: {
+              show: true,
+              position: 'top',
+              color: '#fff',
+              fontSize: fitChartSize(12),
+              formatter: (res) => {
+                let valueMap = {
+                  1: '畅通',
+                  2: '高疑似事件拥堵',
+                  3: '异常拥堵',
+                  4: '常规拥堵'
+                }
+                return valueMap[res.value]
+              }
+            }
+          }
+        ]
+      }
+    } else {
+      params.xAxis.data = getXAxisData()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
+  }
+</script>
+
+<style scoped lang="scss">
+  .traffic-jam {
+    width: vw(800);
+    height: vh(250);
+  }
+</style>