maintenance_system/src/views/pvSystem/reportManager/components/qushiBar.vue

<template>
    <div class="chart-container">
        <div class="chart-header">
            <h2>效率分析</h2>
            <div class="chart-actions">
                <button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
                <button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
                <button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
            </div>
        </div>
        <!--图表内容区域 -->
        <div ref="chartRef" class="chart-content"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;

// 当前时间范围状态
const timeRange = ref('hour'); // 默认显示小时数据

// 定义props
const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({
      hour: {
        xAxis: [],
        efficiencyData: []
      },
      day: {
        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        efficiencyData: []
      },
      week: {
        xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
        efficiencyData: []
      }
    })
  }
});

// 切换时间范围的函数
const changeTimeRange = (range) => {
    timeRange.value = range;
    updateChartData();
};

// 更新图表数据的函数
const updateChartData = () => {
    if (chartInstance) {
        const data = props.chartData[timeRange.value];
        chartInstance.setOption({
            xAxis: {
                data: data.xAxis
            },
            series: [
                {
                    data: data.efficiencyData
                }
            ]
        });
    }
};

// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }

    const data = props.chartData[timeRange.value];

    const option = {
        title: {
            text: '',
            show: false
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(33,56,77,1)',
            borderColor: 'rgba(33,56,77,1)',
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        },
        grid: {
            top: '20%',
            right: '4%',
            bottom: '4%',
            left: '6%',
            containLabel: true
        },
        xAxis: {
            data: data.xAxis,
            type: 'category',
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            max: 100,
            interval: 10,
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '转换效率(%)',
                type: 'bar',
                data: data.efficiencyData,
                showBackground: true,
                itemStyle: {
                    color: 'rgba(63, 140, 255, 1)',
                    borderRadius: [6, 6, 0, 0] // 为顶部两个角设置圆角
                },
                barWidth: 50,
                backgroundStyle: {
                    color: 'rgba(24, 179, 245, 0.1)'
                },
            }
        ]
    };

    chartInstance.setOption(option);
};

// 响应窗口大小变化
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

// 生命周期钩子
onMounted(() => {
    initChart();
    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
        window.removeEventListener('resize', handleResize);
        if (chartInstance) {
            chartInstance.dispose();
            chartInstance = null;
        }
    };
});

</script>

<style scoped>
.chart-container {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.chart-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.chart-actions button {
    background: none;
    border: 1px solid #e0e0e0;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.chart-actions button.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
}

.chart-content {
    width: 100%;
    height: calc(100% - 70px);
    padding: 10px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 300px;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .chart-actions button {
        margin: 0;
        flex: 1;
        margin-right: 5px;
    }

    .chart-actions button:last-child {
        margin-right: 0;
    }
}
</style>