feat: 首页优化，添加开发人员信息

src/views/dashboard/components/Chart/PieChart.vue

@@ -0,0 +1,114 @@
+<!-- 饼图 -->
+<template>
+  <div
+      :id="id"
+      :class="className"
+      :style="{height, width}"
+  />
+</template>
+
+<script setup lang="ts">
+import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
+import {init, EChartsOption} from 'echarts'
+import resize from "@/utils/resize";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'pieChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+})
+
+const {
+  mounted,
+  chart,
+  beforeDestroy,
+  activated,
+  deactivated
+} = resize()
+
+function initChart() {
+  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+
+  pieChart.setOption({
+    title: {
+      show: true,
+      text: '产品分类总览南丁格尔饼图',
+      x: 'center',
+      padding: 15,
+      textStyle: {
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color:'#096b92'
+      }
+    },
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    legend: {
+      top: 'bottom'
+    },
+    series: [
+      {
+        name: 'Nightingale Chart',
+        type: 'pie',
+        radius: [50, 160],
+        center: ['50%', '50%'],
+        roseType: 'area',
+        itemStyle: {
+          borderRadius: 8
+        },
+        data: [
+          { value: 26, name: '家用电器' },
+          { value: 27, name: '户外运动' },
+          { value: 24, name: '汽车用品' },
+          { value: 23, name: '手机数码' }
+        ]
+      }
+    ]
+  } as EChartsOption)
+
+  chart.value = pieChart
+}
+
+onBeforeUnmount(() => {
+  beforeDestroy()
+})
+
+onActivated(() => {
+  activated()
+})
+
+onDeactivated(() => {
+  deactivated()
+})
+
+onMounted(() => {
+  mounted()
+  nextTick(() => {
+    initChart()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>