<template>
  <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  data () {
    return {
      dom: null,
      option: {
        grid: {
          top: '3%',
          left: '1.2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLabel: {
              textStyle: {
                fontSize: '1'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: '12'
              }
            }
          }
        ],
        series: [
          {
            type: 'line',
            areaStyle: { normal: {
              color: 'transparent'
            } },
            lineStyle: {
              color: '#158cf8'
            },
            data: this.yData,
            smooth: true,
            showSymbol: false// 是否默认展示圆点
          }
        ]
      }
    }
  },
  props: {
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    xData: {
      handler (val) {
        this.$nextTick(() => {
          this.option.xAxis[0].data = this.xData
          this.option.series[0].data = this.yData
          this.dom = echarts.init(this.$refs.dom)
          this.dom.setOption(this.option)
          on(window, 'resize', this.resize)
        })
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
