迁移

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

@@ -0,0 +1,251 @@
+<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>