<template>
  <!-- 首页图表 -->
  <label class="el-form-item-label">
    <div id="main" :style="{ height: height, width: width }" />
  </label>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    width: {
      type: String,
      default: '500px'
    },
    height: {
      type: String,
      default: '300px'
    },
    echartData: {
      type: Array
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.getMain()
    }, 2000)
  },
  methods: {
    getMain() {
      const online = [] // 在线
      const outLine = [] // 离线
      const time = [] // 时间
      this.echartData.forEach((item) => {
        if (item.deviceStatus === '1') {
          online.push(item.deviceId)
        } else {
          outLine.push(item.deviceId)
        }
        time.push(item.createTime)
      })
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '设备运行状态'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['在线数', '离线数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '在线数',
            type: 'line',
            stack: 'Total',
            data: online
          },
          {
            name: '离线数',
            type: 'line',
            stack: 'Total',
            data: outLine
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
