完成电量分析部分图表

src/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="duibifenxi-bar-container">
+    <div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+// 定义组件props
+interface CompareData {
+  dates: string[]
+  currentPeriodData: number[]
+  lastYearData: number[]
+}
+
+const props = defineProps<{
+  compareData?: CompareData
+}>()
+
+const chartRef = ref<HTMLElement>()
+let chartInstance: echarts.ECharts | null = null
+
+// 默认数据
+const defaultCompareData: CompareData = {
+  dates: ['1号', '2号', '3号', '4号', '5号', '6号', '7号'],
+  currentPeriodData: [90, 80, 75, 89, 60, 76, 73],
+  lastYearData: [60, 53, 65, 76, 69, 52, 65]
+}
+
+// 初始化图表
+const initChart = () => {
+  if (!chartRef.value) return
+  
+  chartInstance = echarts.init(chartRef.value)
+  const data = props.compareData || defaultCompareData
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function(params: any) {
+        const current = params[0]
+        const lastYear = params[1]
+        let result = `${current.name}<br/>`
+        result += `${current.marker}${current.seriesName}: ${current.value}Kwh<br/>`
+        result += `${lastYear.marker}${lastYear.seriesName}: ${lastYear.value}Kwh`
+        return result
+      }
+    },
+    legend: {
+      data: ['当前周期', '去年同期'],
+      textStyle: {
+        color: '#333'
+      },
+      top: 10
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: data.dates,
+      axisLine: {
+        lineStyle: {
+          color: '#d9d9d9'
+        }
+      },
+      axisLabel: {
+        color: '#666'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: 'kwh',
+      nameTextStyle: {
+        color: '#666',
+        padding: [0, 0, 0, 40]
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#666'
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        name: '当前周期',
+        type: 'bar',
+        data: data.currentPeriodData,
+        itemStyle: {
+          color: '#1890ff'
+        },
+        barWidth: '30%',
+        emphasis: {
+          focus: 'series'
+        }
+      },
+      {
+        name: '去年同期',
+        type: 'bar',
+        data: data.lastYearData,
+        itemStyle: {
+          color: '#52c41a'
+        },
+        barWidth: '30%',
+        emphasis: {
+          focus: 'series'
+        }
+      }
+    ]
+  }
+  
+  chartInstance.setOption(option)
+}
+
+// 响应式处理
+const handleResize = () => {
+  chartInstance?.resize()
+}
+
+// 组件挂载
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件卸载
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  chartInstance?.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.duibifenxi-bar-container {
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart {
+  flex: 1;
+  min-height: 0;
+}
+
+// 响应式调整
+@media screen and (max-width: 768px) {
+  .duibifenxi-bar-container {
+    padding: 12px;
+  }
+  
+  .chart {
+    height: 250px;
+  }
+}
+</style>