<template>
  <div class="furnace-production-contribution">
    <div class="chart-container">
      <div id="furnaceChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'FurnaceProductionContribution',
  data() {
    return {
      furnaceData: [
        { name: '1#炉', value: 780 },
        { name: '2#炉', value: 950 },
        { name: '3#炉', value: 820 },
        { name: '4#炉', value: 580 },
        { name: '5#炉', value: 1200 },
        { name: '6#炉', value: 890 },
        { name: '7#炉', value: 720 },
        { name: '8#炉', value: 760 }
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('furnaceChart')
      const myChart = echarts.init(chartDom)

      const option = {
        backgroundColor: 'transparent',
        grid: {
          left: '8%',
          right: '8%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.furnaceData.map(item => item.name),
          axisLine: {
            lineStyle: {
              color: '#1e3a8a'
            }
          },
          axisLabel: {
            color: '#60a5fa',
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: 1600,
          interval: 400,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#60a5fa',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#1e3a8a',
              type: 'dashed'
            }
          }
        },
        series: [{
          type: 'bar',
          data: this.furnaceData.map(item => item.value),
          barWidth: '60%',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#3b82f6'
              }, {
                offset: 1,
                color: '#1e40af'
              }]
            },
            borderRadius: [2, 2, 0, 0]
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#60a5fa'
                }, {
                  offset: 1,
                  color: '#2563eb'
                }]
              }
            }
          }
        }]
      }

      myChart.setOption(option)

      // 响应式处理
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.furnace-production-contribution {
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #1e3a8a;
  border-radius: 8px;
  padding: 16px;

  .chart-container {
    width: 100%;
    height: 100%;

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