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

<template>
  <div class="tongbifenxi-line-container">
    <div id="tongbifenxiLineChart" class="chart-container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

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

const initChart = () => {
  const chartDom = document.getElementById('tongbifenxiLineChart');
  if (!chartDom) return;

  chartInstance.value = echarts.init(chartDom);

  // 写死的数据
  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: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#409eff',
      textStyle: {
        color: '#fff'
      },
      formatter: (params: any) => {
        const data = params[0];
        return `${data.name}:\n环比增长率: ${data.value}%`;
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dates,
        axisTick: {
          alignWithLabel: true
        },
        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',
        stack: 'Total',
        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)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        lineStyle: {
          color: '#67c23a',
          width: 3
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#67c23a',
          borderColor: '#fff',
          borderWidth: 2
        },
        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;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.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>