feat：完善整体样式

src/views/home/components/gauge.vue

@@ -3,102 +3,129 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
 
   const props = defineProps({
-    id: {
-      type: String,
-      default: () => ''
+    value: {
+      type: Number,
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#02F9FA', '#0063FF']
     }
   })
 
-  let gaugeChart = null
+  const { id, setOption } = useEchart()
+
+  let params = null
+
+  watch(
+    () => props.value,
+    () => {
+      init()
+    }
+  )
+
+  const init = () => {
+    if (!params) {
+      params = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            radius: '100%',
+            splitNumber: 10,
+            center: ['50%', '60%'],
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: props.value > 50 ? '#FFCBB9' : '#02F9FA'
+                  },
+                  {
+                    offset: 1,
+                    color: props.value > 50 ? '#FF4603' : '#0063FF'
+                  }
+                ],
+                global: false
+              },
+              shadowColor: 'rgba(0,138,255,0.45)',
+              shadowBlur: 10,
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+            },
+            progress: {
+              show: true,
+              roundCap: false,
+              width: fitChartSize(6)
+            },
+            axisLine: {
+              roundCap: false,
+              lineStyle: {
+                width: fitChartSize(6)
+              }
+            },
+            pointer: {
+              show: false
+            },
+            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: props.value
+              }
+            ]
+          }
+        ]
+      }
+    } else {
+      params.series[0].data[0].value = props.value
+    }
+    setOption(params)
+  }
 
   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)
-          },
-          axisLine: {
-            roundCap: true,
-            lineStyle: {
-              width: fitChartSize(6)
-            }
-          },
-          pointer: {
-            show: false
-          },
-          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>