<template>
  <div class="furnace-temperature-stability">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'FurnaceTemperatureStability',
  data() {
    return {
      chartData: {
        categories: ['7.1-7.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', '29-30'],
        abnormal: [25, 25, 25, 25, 0, 0, 0, 25, 25, 25, 0, 0, 0, 0, 0, 0],
        fluctuation: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 0, 0, 0, 0, 0, 0],
        stable: [50, 50, 50, 50, 75, 75, 75, 50, 50, 50, 100, 100, 100, 100, 100, 100]
      }
    }
  },
  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: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.categories,
          axisLine: {
            lineStyle: {
              color: '#3675c9'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12,
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(54, 117, 201, 0.3)',
              type: 'dashed'
            }
          }
        },
        legend: {
          data: ['异常', '波动', '稳定'],
          top: '5%',
          right: '10%',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        series: [
          {
            name: '稳定',
            type: 'bar',
            stack: 'total',
            data: this.chartData.stable,
            itemStyle: {
              color: '#00bfff'
            },
            barWidth: '60%'
          },
          {
            name: '波动',
            type: 'bar',
            stack: 'total',
            data: this.chartData.fluctuation,
            itemStyle: {
              color: '#ffa500'
            }
          },
          {
            name: '异常',
            type: 'bar',
            stack: 'total',
            data: this.chartData.abnormal,
            itemStyle: {
              color: '#ff6b6b'
            }
          }
        ]
      }

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

<style lang="less" scoped>
.furnace-temperature-stability {
  width: 100%;
  height: 100%;
  background: transparent;

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