style:首页

2024-12-16 17:38:50 +08:00
parent cc9782e007
commit 0c148685d2
39 changed files with 2838 additions and 1282 deletions
--- a/src/views/home/components/traffic-flow.vue
+++ b/src/views/home/components/traffic-flow.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="traffic-flow" id="traffic-flow" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let trafficChart = null
+
+  let option = {
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '10%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      boundaryGap: true,
+      type: 'category',
+      data: ['河北', '山西', '河南', '内蒙', '辽宁'],
+      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: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(0, 150, 255,0.4)',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290],
+        type: 'bar',
+        showBackground: true,
+        barWidth: fitChartSize(8),
+        itemStyle: {
+          barBorderRadius: [3, 3, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(0, 208, 255, 0)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 208, 255, 1)'
+              }
+            ]
+          }
+        },
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        }
+      }
+    ]
+  }
+  const init = () => {
+    trafficChart = echarts.init(document.getElementById('traffic-flow'))
+    trafficChart.setOption(option)
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (trafficChart) {
+      trafficChart.dispose()
+      trafficChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss">
+  .traffic-flow {
+    width: 100%;
+    height: vh(160);
+  }
+</style>