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/home/components/age-ratio.vue
+++ b/src/views/home/components/age-ratio.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="age-ratio" id="age-ratio" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  let ageChart = null
+
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    ageChart = echarts.init(document.getElementById('age-ratio'))
+    ageChart.setOption({
+      tooltip: {
+        trigger: 'item'
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['30%', '40%'],
+          itemStyle: {
+            borderColor: 'transparent',
+            borderRadius: fitChartSize(2),
+            borderWidth: fitChartSize(2)
+          },
+          label: {
+            color: '#D3F0FE',
+            fontSize: fitChartSize(12)
+          },
+          labelLine: {
+            normal: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          },
+          data: [
+            { value: 484, name: '19岁以下', labelLine: { length: 2 } },
+            { value: 300, name: '18-30岁', labelLine: { length: 2 } },
+            { value: 1048, name: '30-40岁', labelLine: { length: 2 } },
+            { value: 580, name: '40-60岁', labelLine: { length: 2 } },
+            { value: 735, name: '60岁以上', labelLine: { length: 2 } }
+          ]
+        }
+      ]
+    })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (ageChart) {
+      ageChart.dispose()
+      ageChart = null
+      init()
+    }
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .age-ratio {
+    width: vw(253);
+    height: vh(100);
+  }
+</style>