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

<template>
  <div class="duibifenxi-bar-container">
    <div class="title">
      <TitleComponent title="发电量同比分析" :font-level="2" />
      <el-select placeholder="请选择线路" style="width: 150px;">
        <el-option label="A线路" value="all"></el-option>
      </el-select>
    </div>
    <div ref="chartRef" class="chart-container"></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',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#666',
        formatter: '{value} Kwh',
      },
      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: 10px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
}
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 280px;
}
// 响应式调整
@media screen and (max-width: 768px) {
  .duibifenxi-bar-container {
    padding: 5px;
    min-height: 250px;
  }

  .chart-container {
    min-height: 230px;
  }
}
</style>