feat：完善功能

src/views/scenic/components/age.vue

@@ -33,18 +33,17 @@
   }
   const init = () => {
     if (!params) {
-      const center = ['50%', '40%']
+      const center = ['50%', '34%']
       params = {
         legend: {
-          x: 'left',
-          y: '76%',
+          x: 'center',
+          y: '70%',
           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 + '}'
+            let obj = props.list.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
           },
           textStyle: {
             rich: {
@@ -64,7 +63,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['60%', '70%'],
+            radius: ['40%', '50%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -81,7 +80,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['54%', '58%'],
+            radius: ['34%', '38%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -98,7 +97,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['0', '40%'],
+            radius: ['0', '20%'],
             itemStyle: {
               color: '#065EAD'
             },
@@ -111,7 +110,7 @@
             type: 'pie',
             silent: true,
             center: center,
-            radius: ['0', '26%'],
+            radius: ['0', '16%'],
             itemStyle: {
               color: '#0477D1'
             },
@@ -133,100 +132,6 @@
 <style lang="scss" scoped>
   .age {
     width: vw(240);
-    height: vh(240);
+    height: vh(260);
   }
 </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> -->