<template>
  <div class="production-chart">
    <div class="chart-container" ref="productionChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Production',
  data() {
    return {
      productionChart: null,
      productionData: {
        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'],
        values: [7000, 5000, 6000, 4500, 3000, 5000, 9000, 4500, 6000, 3500, 2000, 6500, 4500, 7500, 5000, 5000, 4500, 6000, 3000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      }
    }
  },
  mounted() {
    this.initProductionChart()
    // 自适应窗口大小
    window.addEventListener('resize', this.resizeChart)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart)
    if (this.productionChart) {
      this.productionChart.dispose()
    }
  },
  methods: {
    initProductionChart() {
      this.productionChart = echarts.init(this.$refs.productionChart)
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.productionData.dates,
          axisLine: {
            lineStyle: {
              color: '#60f2ff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi',
            fontSize: 10
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: 10000,
          splitLine: {
            lineStyle: {
              color: 'rgba(96, 242, 255, 0.1)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#60f2ff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi',
            fontSize: 10
          }
        },
        series: [{
          data: this.productionData.values,
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: '#60f2ff'
          }
        }]
      }
      this.productionChart.setOption(option)
    },
    resizeChart() {
      if (this.productionChart) {
        this.productionChart.resize()
      }
    }
  }
}
</script>

<style scoped lang="less">
.production-chart {
  width: 100%;
  height: 100%;

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