还在调整界面

code/web/task_schedule/src/components/Archievement.vue

@@ -1,41 +0,0 @@
-<!--
- * @Author: Kane
- * @Date: 2023-03-04 16:09:31
- * @LastEditors: Kane
- * @FilePath: /task_schedule/src/components/Archievement.vue
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
--->
-<template>
-    <div class="archievement-wrapper">
-        <span>总业绩</span>
-        <span>￥&nbsp;{{ }}</span>
-    </div>
-</template>
-
-<script lang="ts">
-import { reactive } from "vue";
-import * as echarts from "echarts";
-
-export default {
-    name: "ArchievementComponent",
-    setup()
-    {
-        const ui = reactive({
-            total_archievement: 435220,
-        });
-    },
-};
-</script>
-
-<style lang="scss">
-.archievement-wrapper {
-    height: 360px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-}
-</style>

code/web/task_schedule/src/components/ArchievementComponent.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-04 16:09:31
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/ArchievementComponent.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+    <div class="archievement-wrapper">
+        <span>总业绩</span>
+        <span>￥&nbsp;{{ archivement_count }}</span>
+        <div id="chartWrapper"></div>
+    </div>
+</template>
+
+<script>
+import { reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+
+export default {
+    name: "ArchievementComponent",
+    setup()
+    {
+        const ui = reactive({
+            total_archievement: 435220,
+        });
+
+        const archivement_count = computed(() =>
+        {
+            return ui.total_archievement;
+        });
+
+        //设置图表
+        const initCharts = () => 
+        {
+            var chartDom = document.getElementById('chartWrapper');
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            option = {
+                xAxis: {
+                    type: 'category',
+                    data: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",],
+                },
+                yAxis: {
+                    type: 'value',
+                    data: [200, 400, 600, 800, 1000,],
+                },
+                series: [
+                    {
+                        data: [200, 230, 224, 218, 135, 147, 260,],
+                        type: 'line',
+                    },
+                ],
+            };
+
+            option && myChart.setOption(option);
+
+            window.onresize = function() 
+            {
+                //自适应大小
+                myChart.resize();
+            };
+        };
+
+        onMounted(() =>
+        {
+            initCharts();
+        });
+
+        return { ui, archivement_count, initCharts, };
+    },
+};
+</script>
+
+<style lang="scss">
+.archievement-wrapper {
+    height: 360px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+
+    span {
+        display: block;
+        width: 100%;
+        color: #25e6e6;
+        text-align: center;
+
+        font: {
+            size: 35px;
+            family: "FZ-ZHUOHEI";
+        }
+
+        flex-grow: 0;
+    }
+
+    #chartWrapper {
+        min-height: 200px;
+        width: 100%;
+        background-color: #ffffffaf;
+        backdrop-filter: blur(10px);
+        flex-grow: 1;
+        border-radius: 5px;
+    }
+}
+</style>