<template>
    <div :id="idstr"></div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      dataObj: {},
      option: {},
      chart: null,
      clickNum: [1, 1, 1, 1, 1]
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const vm = this
      // 基于准备好的dom，初始化echarts实例
      vm.chart = echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        color: ['#30DDF4', '#E23AA2', '#F5A623', '#D6FFBA'],
        legend: {
          data: ['简历数', '面试数', '发放offer', '入职'],
          right: 20,
          top: 10,
          textStyle: {
            color: '#ffffff'
          },
          icon: 'circle' // 这个字段控制形状类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        },
        grid: {
          top: '20%',
          left: '10%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '简历数',
          data: [820, 932, 901, 934, 1290, 1330, 620],
          type: 'line'
        },
        {
          name: '面试数',
          data: [420, 532, 701, 434, 290, 330, 120],
          type: 'line'
        }, {
          name: '发放offer',
          data: [520, 232, 401, 334, 790, 830, 320],
          type: 'line'
        },
        {
          name: '入职',
          data: [620, 732, 101, 234, 690, 530, 520],
          type: 'line'
        }]
      }
      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      const vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: function () {
      const vm = this
      setTimeout(function () {
        vm.drawLine()
      }, 1000)
      // console.log(this.message)
    }
  }
}
</script>

<style lang="less">

</style>