feat：完善功能

2025-01-16 12:37:23 +08:00
parent ef5cb642ca
commit 2a11f91d36
43 changed files with 2644 additions and 3108 deletions
--- a/src/views/scenic/components/age.vue
+++ b/src/views/scenic/components/age.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="age" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  const { id, setOption } = useEchart()
+  let params = null
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  const getSeriesData = () => {
+    return props.list
+  }
+  const init = () => {
+    if (!params) {
+      const center = ['50%', '40%']
+      params = {
+        legend: {
+          x: 'left',
+          y: '76%',
+          itemHeight: fitChartSize(8),
+          itemWidth: fitChartSize(8),
+          itemGap: fitChartSize(14),
+          formatter: function (name) {
+            // let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
+            // return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
+            return '{name|' + name + '}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#fff',
+                fontSize: fitChartSize(14)
+              },
+              value: {
+                color: '#00D5F6',
+                fontSize: fitChartSize(14)
+              }
+            }
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['60%', '70%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: getSeriesData()
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['54%', '58%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: getSeriesData()
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['0', '40%'],
+            itemStyle: {
+              color: '#065EAD'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['0', '26%'],
+            itemStyle: {
+              color: '#0477D1'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          }
+        ]
+      }
+    } else {
+      params.series[0].data = getSeriesData()
+      params.series[1].data = getSeriesData()
+    }
+    console.log(params, 'params')
+    setOption(params)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .age {
+    width: vw(240);
+    height: vh(240);
+  }
+</style>
+
+<!-- <template>
+  <div class="age-ratio" :id="id" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { guid } from '@/utils/util'
+
+  let ageChart = null
+  let id = ref(guid())
+
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    ageChart = echarts.init(document.getElementById(id.value))
+    ageChart.setOption({
+      legend: {
+        orient: 'horizontal',
+        x: 'left',
+        y: 'bottom',
+        data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
+        itemHeight: fitChartSize(8),
+        itemWidth: fitChartSize(8),
+        itemGap: fitChartSize(10),
+        formatter: function (name) {
+          return '{title|' + name + '}'
+        },
+        textStyle: {
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: fitChartSize(14)
+            },
+            value: {
+              color: '#00D5F6',
+              fontSize: fitChartSize(14)
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          center: ['50%', '40%'],
+          radius: ['65%', '75%'],
+          itemStyle: {
+            borderColor: 'transparent',
+            borderRadius: fitChartSize(2),
+            borderWidth: fitChartSize(2)
+          },
+          label: {
+            show: false,
+            color: '#D3F0FE',
+            fontSize: fitChartSize(12)
+          },
+          labelLine: {
+            normal: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          },
+          data: [
+            { value: 484, name: '19岁以下' },
+            { value: 300, name: '18-30岁' },
+            { value: 1048, name: '30-40岁' },
+            { value: 580, name: '40-60岁' },
+            { value: 735, name: '60岁以上' }
+          ]
+        }
+      ]
+    })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (ageChart) {
+      ageChart.dispose()
+      ageChart = null
+      init()
+    }
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .age-ratio {
+    width: vw(280);
+    height: vh(240);
+  }
+</style> -->