feat：新增景区页面

2024-12-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions
--- a/src/views/scenic/components/pie.vue
+++ b/src/views/scenic/components/pie.vue
@@ -0,0 +1,178 @@
+<template>
+  <div
+    class="gauge"
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { guid } from '@/utils/util'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+  let gaugeChart = null
+  let id = ref(guid())
+  let defaultCofig = {
+    title: [
+      {
+        text: '45.5%',
+        x: 'center',
+        top: '34%',
+        textStyle: {
+          color: '#00D0FF',
+          fontSize: fitChartSize(12)
+        }
+      },
+      {
+        text: '完成率',
+        x: 'center',
+        top: '56%',
+        textStyle: {
+          color: '#fff',
+          fontSize: fitChartSize(12)
+        }
+      }
+    ],
+    series: [
+      // 内侧环
+      {
+        type: 'gauge',
+        radius: '100%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#00D0FF'
+        },
+        axisLine: {
+          show: true,
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      },
+      {
+        type: 'gauge',
+        radius: '90%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#057EB9'
+        },
+        axisLine: {
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      }
+    ]
+  }
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    gaugeChart = echarts.init(document.getElementById(id.value))
+    gaugeChart.setOption({ ...defaultCofig })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (gaugeChart) {
+      gaugeChart.dispose()
+      init()
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>