font-end/src/views/largeScreen/components/UnitPowerConsumption.vue

<template>
  <div class="unit-power-consumption">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'UnitPowerConsumption',
  data() {
    return {
      chartData: {
        dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
        // 三条线的数据：日最高、日平均、日最低
        dailyMax: [520, 530, 480, 470, 490, 510, 500, 520, 480, 490, 510, 520, 430, 420, 440, 480, 470, 490, 510, 500, 520, 480, 490, 510, 520, 430, 420, 440, 480, 470, 490],
        dailyAvg: [420, 430, 380, 370, 390, 410, 400, 420, 380, 390, 410, 420, 330, 320, 340, 380, 370, 390, 410, 400, 420, 380, 390, 410, 420, 330, 320, 340, 380, 370, 390],
        dailyMin: [320, 330, 280, 270, 290, 310, 300, 320, 280, 290, 310, 320, 230, 220, 240, 280, 270, 290, 310, 300, 320, 280, 290, 310, 320, 230, 220, 240, 280, 270, 290]
      },
      chart: null
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)

      const option = {
        grid: {
          top: '15%',
          left: '8%',
          right: '8%',
          bottom: '15%',
          containLabel: true
        },
        legend: {
          data: ['日最高', '日平均', '日最低'],
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12
          },
          bottom: '5%',
          itemWidth: 12,
          itemHeight: 12
        },
        xAxis: {
          type: 'category',
          data: this.chartData.dates,
          axisLine: {
            lineStyle: {
              color: '#3675C9'
            }
          },
          axisLabel: {
            color: '#FFFFFF',
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 600,
          interval: 100,
          axisLine: {
            lineStyle: {
              color: '#3675C9'
            }
          },
          axisLabel: {
            color: '#FFFFFF',
            fontSize: 12,
            formatter: '{value}'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(54, 117, 201, 0.3)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '日最高',
            type: 'line',
            data: this.chartData.dailyMax,
            smooth: true,
            lineStyle: {
              color: '#4ECDC4',
              width: 2
            },
            itemStyle: {
              color: '#4ECDC4'
            },
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(78, 205, 196, 0.6)'
                }, {
                  offset: 1,
                  color: 'rgba(78, 205, 196, 0.1)'
                }]
              }
            },
            stack: 'total'
          },
          {
            name: '日平均',
            type: 'line',
            data: this.chartData.dailyAvg,
            smooth: true,
            lineStyle: {
              color: '#E91E63',
              width: 2
            },
            itemStyle: {
              color: '#E91E63'
            },
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(233, 30, 99, 0.6)'
                }, {
                  offset: 1,
                  color: 'rgba(233, 30, 99, 0.1)'
                }]
              }
            },
            stack: 'total'
          },
          {
            name: '日最低',
            type: 'line',
            data: this.chartData.dailyMin,
            smooth: true,
            lineStyle: {
              color: '#2196F3',
              width: 2
            },
            itemStyle: {
              color: '#2196F3'
            },
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(33, 150, 243, 0.6)'
                }, {
                  offset: 1,
                  color: 'rgba(33, 150, 243, 0.1)'
                }]
              }
            },
            stack: 'total'
          }
        ]
      }

      this.chart.setOption(option)
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>

<style scoped>
.unit-power-consumption {
  width: 100%;
  height: 100%;
  background: transparent;
}

.chart-container {
  width: 100%;
  height: 298px;
}
</style>