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/jam.vue
+++ b/src/views/home/components/jam.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="top" id="jam" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let topChart = null
+  let result = [
+    { name: '路段1', value: 86 },
+    { name: '路段1', value: 83 },
+    { name: '路段1', value: 73 },
+    { name: '路段1', value: 61 },
+    { name: '路段1', value: 61 }
+  ]
+  let option = {
+    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: result.map((item) => item.name),
+        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}}`
+          },
+          rich: {
+            name: {
+              align: 'center',
+              color: '#D3E5FF',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            },
+            value: {
+              align: 'center',
+              color: '#fff',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            }
+          }
+        },
+        data: result.map((item) => item.value)
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: fitChartSize(4),
+        MaxSize: 0,
+        showBackground: true,
+        barBorderRadius: [30, 0, 0, 30],
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        },
+        label: {
+          show: true,
+          offset: [10, -13],
+          color: '#D3E5FF',
+          fontWeight: 500,
+          position: 'left',
+          align: 'left',
+          fontSize: fitChartSize(14),
+          fontFamily: 'Source Han Sans CN',
+          formatter: function (params) {
+            return params.data.name
+          }
+        },
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 112, 33, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255, 112, 33, 1)'
+                  }
+                ]
+              }
+            }
+          }
+        })
+      },
+      {
+        name: '外圆',
+        type: 'scatter',
+        emphasis: {
+          scale: false
+        },
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: fitChartSize(10),
+        z: 2,
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: '#fff',
+              opacity: 1
+            }
+          }
+        }),
+        animationDelay: 500
+      }
+    ]
+  }
+  const init = () => {
+    topChart = echarts.init(document.getElementById('jam'))
+    topChart.setOption(option)
+  }
+  const resize = () => {
+    if (topChart) {
+      topChart.dispose()
+      topChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .top {
+    width: 100%;
+    height: vh(160);
+  }
+</style>