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

<template>
  <div class="tongbifenxi-line-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="chartDomRef" class="chart-container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import TitleComponent from '@/components/TitleComponent/index.vue';

const chartDomRef = ref<HTMLElement | null>(null);
const chartInstance = ref<echarts.ECharts | null>(null);

const initChart = () => {
  if (!chartDomRef.value) return;

  chartInstance.value = echarts.init(chartDomRef.value);

  // 写死的数据
  const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
  const growthRates = [1.50, 1.20, 0.50, 0.80, 0.90, 0.30, -2.00];

  const option: echarts.EChartsOption = {
    tooltip: {
      trigger: 'item',
      backgroundColor: '#67c23a',
      borderWidth: 0,
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      formatter: (params: any) => {
        return `${params.name}：\n环比增长率：${params.value}%`;
      },
      padding: [10, 15]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dates,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#d9d9d9'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: -2,
        max: 2,
        axisLabel: {
          color: '#666',
          formatter: '{value}%'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#d9d9d9'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed'
          }
        }
      }
    ],
    series: [
      {
        name: '环比增长率',
        type: 'line',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(103, 194, 58, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(103, 194, 58, 0.05)'
            }
          ])
        },
        lineStyle: {
          color: '#67c23a',
          width: 3
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#67c23a',
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#67c23a',
            borderColor: '#fff',
            borderWidth: 3,
            shadowBlur: 10,
            shadowColor: 'rgba(103, 194, 58, 0.5)'
          },
          
        },
        data: growthRates,
        smooth: true
      }
    ]
  };

  chartInstance.value.setOption(option);
};

const handleResize = () => {
  chartInstance.value?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  chartInstance.value?.dispose();
});
</script>

<style scoped>
.tongbifenxi-line-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}

.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 (max-width: 768px) {
  .tongbifenxi-line-container {
    padding: 5px;
    min-height: 250px;
  }
  
  .chart-container {
    min-height: 230px;
  }
}
</style>