<!--
 * @Author: DY
 * @Date: 2021-12-13 16:39:34
 * @LastEditors: DY
 * @LastEditTime: 2022-03-03 15:43:32
 * @Description: E10折线柱状图
-->
<template>
  <div>
    <div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
  </div>
</template>

<script>
import echarts from 'echarts'
// import { getE10Stack } from '@/api/equipment/infoPandect'

export default {
  props: {
    time1: {
      type: Date,
      default: () => {
        return ''
      }
    },
    time2: {
      type: Date,
      default: () => {
        return ''
      }
    },
    name: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      chart: null,
      list: [],
      xDataList: [],
      engineeringList: [],
      nonscheduledDownList: [],
      productiveList: [],
      rampUpDownList: [],
      scheduledDownList: [],
      standByList: [],
      unscheduledDownList: []
    }
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    removeData() {
      this.xDataList = ['ACOT1', 'ACOT2']
      this.engineeringList = [20, 30]
      this.nonscheduledDownList = [20, 20]
      this.productiveList = [10, 2]
      this.rampUpDownList = [30, 3]
      this.scheduledDownList = [8, 15]
      this.standByList = [2, 12]
      this.unscheduledDownList = [10, 18]
    },
    getList() {
      this.removeData()
      this.init()
    },
    init() {
      this.chart = echarts.init(document.getElementById('monitorChart'))
      const that = this
      that.chart.on('click', function(params) {
        that.$emit('equipmentName', params.name)
      })

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: -30
          },
          max: 10,
          data: this.xDataList
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [
          {
            name: 'engineering',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            barWidth: 40,
            data: this.engineeringList
          },
          {
            name: 'nonscheduledDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.nonscheduledDownList
          },
          {
            name: 'productive',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.productiveList
          },
          {
            name: 'rampUpDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.rampUpDownList
          },
          {
            name: 'scheduledDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.scheduledDownList
          },
          {
            name: 'standBy',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.standByList
          },
          {
            name: 'unscheduledDown',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.unscheduledDownList
          }
        ]
      })
    }
  }
}
</script>
