tk-page-miniBackstage/src/components/EChartsComponent.vue

<template>
    <div ref="chart" style="width: 500px; height: 300px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';

export default {
    name: 'EChartsComponent',
    props: {
        title: {
            type: String,
            required: true
        },
        id: {
            type: String,
            required: true
        },
        dataType: {
            type: String,
            required: true
        },
        time: {
            type: String,
            required: true
        }

    },
    data() {
        return {
            seriesData: [],
            num: 0,
            inputTime: '',
        }
    },
    mounted() {

        this.inputTime = this.time
        this.getTkhostdetail();
        console.log(this.time)

        console.log(this.getPrevious7Days(this.inputTime))

    },
    methods: {
        initChart() {
            if (!this.$refs.chart) {
                console.error('DOM element not found');
                return;
            }
            const myChart = echarts.init(this.$refs.chart);
            const option = {
                title: {
                    text: this.title
                },
                tooltip: {},
                legend: {
                    data: [this.title]
                },
                xAxis: {
                    data: [this.getPrevious7Days(this.inputTime)[0].slice(4), this.getPrevious7Days(this.inputTime)[1].slice(4), this.getPrevious7Days(this.inputTime)[2].slice(4), this.getPrevious7Days(this.inputTime)[3].slice(4), this.getPrevious7Days(this.inputTime)[4].slice(4), this.getPrevious7Days(this.inputTime)[5].slice(4), this.getPrevious7Days(this.inputTime)[6].slice(4)]
                },
                yAxis: {},
                series: [
                    {
                        name: this.title,
                        type: 'line',
                        data: [this.seriesData[0], this.seriesData[1], this.seriesData[2], this.seriesData[3], this.seriesData[4], this.seriesData[5], this.seriesData[6]],
                        smooth: true

                    }
                ]
            };
            myChart.setOption(option);
            console.log(this.dataTime)

        },
        getTkhostdetail() {
            tkhostdetail({
                hostId: this.id,
                dataType: this.dataType,
                searchTimeStart: this.getPrevious7Days(this.inputTime)[0],
                searchTimeEnd: this.getPrevious7Days(this.inputTime)[6]
            }).then(res => {
                // console.log("返回数据", res[0][this.getPrevious7Days(this.inputTime)[2]])
                //echarts 数据初始化
                this.seriesData = [
                    res[0][this.getPrevious7Days(this.inputTime)[0]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[0]][this.dataType]),
                    res[0][this.getPrevious7Days(this.inputTime)[1]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[1]][this.dataType]),
                    res[0][this.getPrevious7Days(this.inputTime)[2]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[2]][this.dataType]),
                    res[0][this.getPrevious7Days(this.inputTime)[3]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[3]][this.dataType]),
                    res[0][this.getPrevious7Days(this.inputTime)[4]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[4]][this.dataType]),
                    res[0][this.getPrevious7Days(this.inputTime)[5]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[5]][this.dataType]),
                    res[0][this.getPrevious7Days(this.inputTime)[6]] == null ? 0 : Number(res[0][this.getPrevious7Days(this.inputTime)[6]][this.dataType]),
                ]

                // this.seriesData = {
                //     [this.getPrevious7Days(this.inputTime)[0]]: res[0][this.getPrevious7Days(this.inputTime)[0]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[0]][this.dataType],
                //     [this.getPrevious7Days(this.inputTime)[1]]: res[0][this.getPrevious7Days(this.inputTime)[1]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[1]][this.dataType],
                //     [this.getPrevious7Days(this.inputTime)[2]]: res[0][this.getPrevious7Days(this.inputTime)[2]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[2]][this.dataType],
                //     [this.getPrevious7Days(this.inputTime)[3]]: res[0][this.getPrevious7Days(this.inputTime)[3]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[3]][this.dataType],
                //     [this.getPrevious7Days(this.inputTime)[4]]: res[0][this.getPrevious7Days(this.inputTime)[4]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[4]][this.dataType],
                //     [this.getPrevious7Days(this.inputTime)[5]]: res[0][this.getPrevious7Days(this.inputTime)[5]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[5]][this.dataType],
                //     [this.getPrevious7Days(this.inputTime)[6]]: res[0][this.getPrevious7Days(this.inputTime)[6]] == null ? 0 : res[0][this.getPrevious7Days(this.inputTime)[6]][this.dataType],
                // }

                this.initChart();
                this.num++
                console.log("返回数据", this.seriesData)
                console.log("返回数据", this.num)


            })
        },
        // getCurrentDate() {
        //     const dates = [];
        //     const today = new Date();

        //     for (let i = 6; i >= 0; i--) {
        //         const date = new Date(today);
        //         date.setDate(today.getDate() - i);

        //         const year = date.getFullYear();
        //         const month = String(date.getMonth() + 1).padStart(2, '0');
        //         const day = String(date.getDate()).padStart(2, '0');

        //         dates.push(`${year}${month}${day}`);
        //     }

        //     return dates;
        // },
        getPrevious7Days(dateStr) {
            // 验证输入格式是否正确
            if (!/^\d{8}$/.test(dateStr)) {
                console.error('输入的格式不是YYYYMMDD.');
                return [];
            }

            // 解析输入的日期字符串
            const year = parseInt(dateStr.substring(0, 4));
            const month = parseInt(dateStr.substring(4, 6)) - 1; // 月份从 0 开始
            const day = parseInt(dateStr.substring(6, 8));

            // 创建日期对象
            const date = new Date(year, month, day);

            // 存储结果的数组
            const result = [];

            // 计算前 7 天的日期
            for (let i = 0; i <= 6; i++) {
                const currentDate = new Date(date);
                currentDate.setDate(date.getDate() - i); // 减去 i 天

                // 格式化为 YYYYMMDD
                const formattedDate = `${currentDate.getFullYear()}${(currentDate.getMonth() + 1).toString().padStart(2, '0')}${currentDate.getDate().toString().padStart(2, '0')}`;
                result.push(formattedDate);
            }

            // 按时间顺序排序（从最早到最晚）
            result.sort((a, b) => a.localeCompare(b));

            return result;
        }


    }
};
</script>