style:首页样式

2024-12-13 10:21:20 +08:00
parent 81d7983cb6
commit c263e68dd9
24 changed files with 657 additions and 23 deletions
--- a/src/views/home/components/gauge.vue
+++ b/src/views/home/components/gauge.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="gauge" :id="id" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    id: {
+      type: String,
+      default: () => ''
+    }
+  })
+
+  let gaugeChart = null
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    gaugeChart = echarts.init(document.getElementById(props.id))
+    gaugeChart.setOption({
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 180,
+          endAngle: 0,
+          min: 0,
+          max: 100,
+          radius: '100%',
+          splitNumber: 10,
+          center: ['50%', '60%'],
+          itemStyle: {
+            color: '#58D9F9',
+            shadowColor: 'rgba(0,138,255,0.45)',
+            shadowBlur: 10,
+            shadowOffsetX: 2,
+            shadowOffsetY: 2
+          },
+          progress: {
+            show: true,
+            roundCap: true,
+            width: fitChartSize(6)
+          },
+          pointer: {
+            show: false
+          },
+          axisLine: {
+            roundCap: true,
+            lineStyle: {
+              width: fitChartSize(6)
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          detail: {
+            width: '100%',
+            lineHeight: 20,
+            height: 20,
+            offsetCenter: [0, '20%'],
+            valueAnimation: true,
+            formatter: function (value) {
+              return '{value|' + value.toFixed(0) + '}{unit|%}'
+            },
+            rich: {
+              value: {
+                fontSize: fitChartSize(12),
+                fontWeight: 'bolder',
+                color: '#02F9FA'
+              },
+              unit: {
+                fontSize: fitChartSize(12),
+                color: '#02F9FA'
+              }
+            }
+          },
+          data: [
+            {
+              value: 80
+            }
+          ]
+        }
+      ]
+    })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (gaugeChart) {
+      gaugeChart.dispose()
+      init()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .gauge {
+    width: vw(70);
+    height: vh(50);
+  }
+</style>