将组件数据参数化

2023-03-08 10:29:35 +08:00
parent 3313414c70
commit 18d4620729
3 changed files with 53 additions and 36 deletions
--- a/code/web/task_schedule/src/components/ArchievementChartComponent.vue
+++ b/code/web/task_schedule/src/components/ArchievementChartComponent.vue
@@ -0,0 +1,120 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-03-04 16:09:31
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/components/ArchievementChartComponent.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 lang="ts">
+import { reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+
+export default {
+    name: "ArchievementChartComponent",
+    props: {
+        total_archievement: {
+            type: String,
+            require: true,
+        },
+        chart_data: {
+            type: Array,
+            require: true,
+        },
+    },
+    setup(props)
+    {
+        const ui = reactive({
+            total_archievement: props.total_archievement,
+            chart_data: props.chart_data,
+        });
+
+        const archivement_count = computed(() =>
+        {
+            return ui.total_archievement;
+        });
+
+        //设置图表
+        const initCharts = () => 
+        {
+            const chartDom = document.getElementById("chartWrapper");
+            //@ts-ignore
+            const myChart = echarts.init((chartDom));
+            const option = {
+                xAxis: {
+                    type: "category",
+                    data: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",],
+                },
+                yAxis: {
+                    type: "value",
+                    data: [200, 400, 600, 800, 1000,],
+                },
+                series: [
+                    {
+                        data: props.chart_data,
+                        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: $color-charts-bg;
+        backdrop-filter: blur(10px);
+        flex-grow: 1;
+        border-radius: 5px;
+    }
+}
+</style>