完成

app/src/components/echarts/MyEcharts.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="Echarts">
-    <div id="main" style="width: 600px; height: 400px"></div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from 'vue'
-import * as echarts from 'echarts'
-const myEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(document.getElementById('main'))
-
-  // 指定图表的配置项和数据
-  var option = {
-    title: {
-      text: 'ECharts 入门示例'
-    },
-    tooltip: {},
-    legend: {
-      data: ['销量']
-    },
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20]
-      }
-    ]
-  }
-
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option)
-}
-onMounted(() => {
-  myEcharts()
-})
-</script>
-
-<style></style>

app/src/views/HomeView.vue

@@ -10,10 +10,17 @@
 
 <template>
   <div class="home">
-    <MyEcharts></MyEcharts>
+    <FeedbackEcharts></FeedbackEcharts>
+    <UserDataEcharts></UserDataEcharts>
   </div>
 </template>
 <script setup>
-import MyEcharts from '@/components/echarts/MyEcharts.vue'
+import FeedbackEcharts from './components/echarts/FeedbackEcharts.vue'
+import UserDataEcharts from './components/echarts/UserDataEcharts.vue'
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

app/src/views/components/echarts/FeedbackEcharts.vue

@@ -0,0 +1,139 @@
+<!--
+ * @Author: BINGWU
+ * @Date: 2024-05-23 21:45:05
+ * @LastEditors: BINGWU HuJiaCheng2003@163.com
+ * @LastEditTime: 2024-05-23 23:13:27
+ * @FilePath: \employee-information-management-system\app\src\views\components\echarts\FeedbackEcharts.vue
+ * @Describe: 
+ * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
+-->
+<template>
+  <div class="feedback-echarts">
+    <div id="feedback-echarts" style="width: 600px; height: 500px"></div>
+    <div style="text-align: center">反馈信息数据</div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from 'vue'
+import * as echarts from 'echarts'
+import { getAllFeedback } from '@/api/feedback'
+import { dayjs } from 'element-plus'
+const data1 = ref({
+  '待处理-1': 0,
+  '待处理-2': 0,
+  '待处理-3': 0,
+  '待处理-4': 0,
+  '待处理-5': 0,
+  '待处理-6': 0,
+  '待处理-7': 0,
+  '待处理-8': 0,
+  '待处理-9': 0,
+  '待处理-10': 0,
+  '待处理-11': 0,
+  '待处理-12': 0
+})
+const data2 = ref({
+  '已处理-1': 0,
+  '已处理-2': 0,
+  '已处理-3': 0,
+  '已处理-4': 0,
+  '已处理-5': 0,
+  '已处理-6': 0,
+  '已处理-7': 0,
+  '已处理-8': 0,
+  '已处理-9': 0,
+  '已处理-10': 0,
+  '已处理-11': 0,
+  '已处理-12': 0
+})
+const myEcharts = (data1, data2) => {
+  // 基于准备好的dom，初始化echarts实例
+  var myChart = echarts.init(document.getElementById('feedback-echarts'))
+
+  // 指定图表的配置项和数据
+  var option = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+      source: [
+        [
+          'product',
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '12月',
+          '12月'
+        ],
+        ['待处理', ...data1],
+        ['已处理', ...data2]
+      ]
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' },
+      { type: 'bar' }
+    ]
+  }
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+const getData = async () => {
+  await getAllFeedback({ pageIndex: 1, pageSize: 99999 }).then((res) => {
+    res.data.data.forEach((item) => {
+      const key = item.status + '-' + dayjs(item.date).format('M')
+      if (item.status === '已处理') {
+        data2.value[key]++
+      } else {
+        data1.value[key]++
+      }
+    })
+  })
+}
+
+const unHandleData = computed(() => {
+  let newData = []
+  for (const key in data1.value) {
+    newData.push(data1.value[key])
+  }
+  return newData
+})
+const handleData = computed(() => {
+  let newData = []
+  for (const key in data2.value) {
+    newData.push(data2.value[key])
+  }
+  return newData
+})
+onMounted(async () => {
+  await getData()
+  myEcharts(unHandleData.value, handleData.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.feedback-echarts {
+  height: 100%;
+}
+</style>

app/src/views/components/echarts/UserDataEcharts.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: BINGWU
+ * @Date: 2024-05-23 21:45:05
+ * @LastEditors: BINGWU HuJiaCheng2003@163.com
+ * @LastEditTime: 2024-05-23 22:43:13
+ * @FilePath: \employee-information-management-system\app\src\views\components\echarts\UserDataEcharts.vue
+ * @Describe: 
+ * @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
+-->
+<template>
+  <div class="userdata-echarts">
+    <div id="userdata-echarts" style="width: 400px; height: 400px"></div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import { getAllUser } from '@/api/user'
+const echartsData = ref([
+  { value: 0, name: 'employeeAdmin' },
+  { value: 0, name: 'customAdmin' },
+  { value: 0, name: 'feedbackAdmin' },
+  { value: 0, name: 'rewardAdmin' },
+  { value: 0, name: 'requestAdmin' }
+])
+const myEcharts = (data) => {
+  // 基于准备好的dom，初始化echarts实例
+  var myChart = echarts.init(document.getElementById('userdata-echarts'))
+
+  // 指定图表的配置项和数据
+  var option = {
+    title: {
+      text: '用户数据',
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+      left: 'center',
+      top: 'bottom',
+      data: [
+        'employeeAdmin',
+        'customAdmin',
+        'feedbackAdmin',
+        'rewardAdmin',
+        'requestAdmin'
+      ]
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        mark: { show: true },
+        dataView: { show: true, readOnly: false },
+        restore: { show: true },
+        saveAsImage: { show: true }
+      }
+    },
+    series: [
+      {
+        name: '管理员',
+        type: 'pie',
+        radius: [20, 140],
+        center: ['50%', '50%'],
+        roseType: 'radius',
+        itemStyle: {
+          borderRadius: 5
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: true
+          }
+        },
+        data
+      }
+    ]
+  }
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+const getData = async () => {
+  await getAllUser({ pageIndex: 1, pageSize: 99999 }).then((res) => {
+    res.data.data.forEach((item) => {
+      echartsData.value.forEach((item1) => {
+        if (item1.name === item.userType) {
+          item1.value++
+        }
+      })
+    })
+  })
+}
+
+onMounted(async () => {
+  await getData()
+  myEcharts(echartsData.value)
+})
+</script>
+
+<style></style>