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

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

export default {
  props: {
    time1: {
      type: Date,
      default: () => {
        return ''
      }
    },
    time2: {
      type: Date,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      chart: null,
      list: [],
      xDataList: [],
      yDataList: []
    }
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    removeData() {
      this.xDataList = ['ACOT1', 'ACOT2', 'ACOT-a', 'ACOT-b']
      this.yDataList = [22, 40, 66, 44]
    },
    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}次'
          }
        },
        {
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}次'
          }
        }
        ],
        series: [
          {
            name: '稼动率值',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            barWidth: 40,
            data: this.yDataList
          },
          {
            name: '稼动率值',
            type: 'line',
            yAxisIndex: 1,
            data: this.yDataList
          }
        ]
      })
    }
  }
}
</script>
