desktop_task_schedule/code/web/task_schedule/src/components/ArchievementChartComponent.vue

<!--
 * @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>