<template>
  <!-- 审批状态 -->
  <div class="box">
    <div id="main" style="height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ApprovalStatus',
  data() {
    return {}
  },
  mounted() {
    this.EchartsShow()
  },
  methods: {
    EchartsShow() {
      var chartDom = document.getElementById('main')
      var myChart1 = echarts.init(chartDom)
      var yDataArr = [0, 20, 40, 60, 80, 100]
      var option
      option = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
          formatter: function (params) {
            return `${params.name}(${params.seriesName})<br/>待审批:${params.value}个`
          },
        },
        legend: {
          data: ['报销', '请假', '入职', '转正', '合同', '加班'],
          left: 'right',
        },

        grid: {
          left: '0',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '报销',
            type: 'line',
            areaStyle: {
              color: 'rgba(255, 0, 0, 0)',
            },
            emphasis: {
              focus: 'series',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' },
                ]),
              },
            },
            data: [0, 40, 30, 20, 70, 80, 100],
          },
          {
            name: '请假',
            type: 'line',
            areaStyle: {
              color: 'rgba(255, 0, 0, 0)',
            },
            emphasis: {
              focus: 'series',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' },
                ]),
              },
            },
            data: yDataArr[(30, 40, 70, 20, 60, 80, 100)],
          },
          {
            name: '入职',
            type: 'line',
            areaStyle: {
              color: 'rgba(255, 0, 0, 0)',
            },
            emphasis: {
              focus: 'series',
              areaStyle: {
                color: 'red',
              },
            },
            data: [10, 40, 30, 90, 70, 80, 100],
          },
          {
            name: '请假',
            type: 'line',
            areaStyle: {
              color: 'rgba(255, 0, 0, 0)',
            },
            emphasis: {
              focus: 'series',
              areaStyle: {
                color: '#e55555',
              },
            },
            data: [50, 90, 30, 20, 70, 80, 50],
          },
          {
            name: '加班',
            type: 'line',
            // label: {
            //   show: true,
            //   position: 'top',
            // },
            areaStyle: {
              color: 'rgba(255, 0, 0, 0)',
            },
            emphasis: {
              focus: 'series',
              areaStyle: {
                color: '#ffae44',
              },
              emphasis: {
                focus: 'series',
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0, [
                    { offset: 0, color: '#ffae44' },
                    { offset: 0.5, color: '#f7d1a0' },
                    { offset: 1, color: '#ffffff' },
                  ]),
                },
              },
            },
            data: [70, 40, 30, 20, 70, 80, 20],
          },
        ],
      }
      option && myChart1.setOption(option)
      window.addEventListener('resize', function () {
        myChart1.resize()
      })
      // window.onresize = function () {
      //   myChart1.resize()
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
}
</style>