dyf-vue-ui/src/views/homeIndex/components/DeviceUsage.vue

<template>
    <div class="vchartPage">
        <div class="btn_mounth_box">
            <div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
            <div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
        </div>

        <div ref="chartRef" class="chartRef"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
const chartRef = ref<HTMLDivElement | null>(null);
const activeTab = ref('month');
let myChart: echarts.ECharts | null = null; // 保存图表实例

// 根据天数获取数据并更新图表
const fetchDataAndUpdate = (days: number) => {
    getDeviceUsageFrequency({ days }).then((res) => {
        if (res.code === 200 && res.data && myChart) {
            // 处理接口返回的真实数据（转换为图表所需格式）
            const chartData = res.data.map(item => ({
                name: item.deviceName,
                value: item.frequency
            }));
            // 更新图表
            myChart.setOption({
                yAxis: {
                    data: chartData.map(item => item.name)
                },
                series: [{
                    data: chartData.map(item => item.value)
                }]
            });
        }
    }).catch(err => {
        console.error('获取数据失败', err);
    });
};

// 切换标签逻辑
const switchTab = (tab: string) => {
    activeTab.value = tab;
    // 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
    const days = tab === 'month' ? 30 : 180;
    fetchDataAndUpdate(days);
};

onMounted(() => {
    if (chartRef.value) {
        // 初始化图表实例
        myChart = echarts.init(chartRef.value);
        
        // 初始图表配置（空数据占位）
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
            },
            grid: {
                left: '5%',
                right: '10%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            yAxis: {
                type: 'category',
                data: [], // 初始空数据
                axisLine: {
                    lineStyle: {
                        color: '#1e3a8a',
                        show: false
                    }
                },
                axisLabel: {
                    color: '#DEEFFF'
                }
            },
            xAxis: {
                type: 'value',
                axisLine: { show: false },
                axisLabel: { show: false },
                splitLine: { show: false }
            },
            series: [{
                name: '使用频次',
                type: 'bar',
                data: [], // 初始空数据
                barWidth: '14px',
                stack: 'total',
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true,
                    color: '#DEEFFF'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: '#0768D4' },
                            { offset: 1, color: '#0EC4DF' }
                        ]
                    ),
                    borderRadius: 4
                }
            }]
        };
        myChart.setOption(option);
        fetchDataAndUpdate(30);
        // 窗口resize自适应
        window.addEventListener('resize', () => {
            myChart?.resize();
        });
    }
});
</script>

<style scoped lang="scss">
.vchartPage {
    margin-top: 4.8vh;
    position: relative; // 新增：确保按钮定位正确
}

.btn_mounth_box {
    display: flex;
    position: absolute;
    right: 1vh;
    top: 0vh;
    z-index: 1;
}

.btn_mounth {
    width:4.5vw;
    height:4.5vh;
    background: url(@/assets/homeIndex/btn.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 4.4vh;
    color: #fff;
    font-size: 0.8vw;
    cursor: pointer;
    margin-left: 0.5vw; // 新增：按钮间距
}

.cur {
    background: url(@/assets/homeIndex/btn_cur.png) no-repeat;
    background-size: 100% 100%;
}

.chartRef {
    width: 100%;
    height: 25vh;
}
</style>