<template>
  <div id="mainLeaveLineChart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainLeaveLineChart')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
          formatter: (a) => {
            return a[0].marker + a[0].name + '月' + ' ' + a[0].value + '次'
          },
        },
        legend: {
          data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
          top: 'bottom',
          padding: 30,
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true,
        // },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              '一',
              '二',
              '三',
              '四',
              '五',
              '六',
              '七',
              '八',
              '九',
              '十',
              '十一',
              '十二',
            ],
            name: '月份',
            nameTextStyle: {
              color: '#9FA1A7',
              fontSize: 16,
            },
            axisLabel: {
              fontSize: 14,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '次',
            nameTextStyle: {
              color: '#9FA1A7',
              fontSize: 16,
            },
            axisLabel: {
              fontSize: 14,
            },
            // max: '30'
          },
        ],
        series: [
          {
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fae768',
                },
                {
                  offset: 1,
                  color: '#87e885',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [12, 18, 10, 13, 23, 12, 6, 17, 13, 10, 9, 19],
          },
        ],
      }

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