tk-mini-program-PC/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
        }

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


        this.getTkhostdetail();

    },
    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.getCurrentDate()[0].slice(4), this.getCurrentDate()[1].slice(4), this.getCurrentDate()[2].slice(4), this.getCurrentDate()[3].slice(4), this.getCurrentDate()[4].slice(4), this.getCurrentDate()[5].slice(4), this.getCurrentDate()[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);
        },
        getTkhostdetail() {
            tkhostdetail({
                hostId: this.id,
                dataType: this.dataType,
                searchTimeStart: this.getCurrentDate()[0],
                searchTimeEnd: this.getCurrentDate()[6]
            }).then(res => {
                // console.log("返回数据", res[0][this.getCurrentDate()[2]])
                //echarts 数据初始化
                this.seriesData = [
                    res[0][this.getCurrentDate()[0]] == null ? 0 : Number(res[0][this.getCurrentDate()[0]][this.dataType]),
                    res[0][this.getCurrentDate()[1]] == null ? 0 : Number(res[0][this.getCurrentDate()[1]][this.dataType]),
                    res[0][this.getCurrentDate()[2]] == null ? 0 : Number(res[0][this.getCurrentDate()[2]][this.dataType]),
                    res[0][this.getCurrentDate()[3]] == null ? 0 : Number(res[0][this.getCurrentDate()[3]][this.dataType]),
                    res[0][this.getCurrentDate()[4]] == null ? 0 : Number(res[0][this.getCurrentDate()[4]][this.dataType]),
                    res[0][this.getCurrentDate()[5]] == null ? 0 : Number(res[0][this.getCurrentDate()[5]][this.dataType]),
                    res[0][this.getCurrentDate()[6]] == null ? 0 : Number(res[0][this.getCurrentDate()[6]][this.dataType]),
                ]

                // this.seriesData = {
                //     [this.getCurrentDate()[0]]: res[0][this.getCurrentDate()[0]] == null ? 0 : res[0][this.getCurrentDate()[0]][this.dataType],
                //     [this.getCurrentDate()[1]]: res[0][this.getCurrentDate()[1]] == null ? 0 : res[0][this.getCurrentDate()[1]][this.dataType],
                //     [this.getCurrentDate()[2]]: res[0][this.getCurrentDate()[2]] == null ? 0 : res[0][this.getCurrentDate()[2]][this.dataType],
                //     [this.getCurrentDate()[3]]: res[0][this.getCurrentDate()[3]] == null ? 0 : res[0][this.getCurrentDate()[3]][this.dataType],
                //     [this.getCurrentDate()[4]]: res[0][this.getCurrentDate()[4]] == null ? 0 : res[0][this.getCurrentDate()[4]][this.dataType],
                //     [this.getCurrentDate()[5]]: res[0][this.getCurrentDate()[5]] == null ? 0 : res[0][this.getCurrentDate()[5]][this.dataType],
                //     [this.getCurrentDate()[6]]: res[0][this.getCurrentDate()[6]] == null ? 0 : res[0][this.getCurrentDate()[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;
        }

    }
};
</script>