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

      option = {
        tooltip: {
          trigger: 'axis',
          formatter: (a) => {
            return (
              a[0].name +
              '月' +
              '<br/>' +
              a[0].marker +
              a[0].seriesName +
              ' ' +
              a[0].value +
              '次' +
              '<br/>' +
              a[1].marker +
              a[1].seriesName +
              ' ' +
              a[1].value +
              '次'
            )
          },
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
          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,
          },
        },
        series: [
          {
            name: '质量巡检',
            type: 'line',
            stack: 'Total',
            data: [12, 13, 10, 13, 15, 12, 15, 17, 19, 3, 2, 5],
          },
          {
            name: '质量整改',
            type: 'line',
            stack: 'Total',
            data: [22, 18, 19, 4, 7, 4, 9, 23, 5, 4, 3, 15],
          },
        ],
      }

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