<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
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    const option = {
      grid: {
        top: '3%',
        left: '1.2%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            textStyle: {
              fontSize: '6'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            textStyle: {
              fontSize: '6'
            }
          }
        }
      ],
      series: [
        {
          type: 'line',
          areaStyle: { normal: {
            color: 'transparent'
          } },
          lineStyle: {
            color: '#158cf8'
          },
          data: [120, 132, 101, 134, 90, 230, 210],
          smooth: true,
          showSymbol: false// 是否默认展示圆点
        }
      ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
