<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    let [xData, series1, series2, series3] = [[], [], [], []]
    let end = moment().date()
    let month = moment().locale('en').format('MMM')
    for (let i = 1; i <= end; i++) {
      xData.push(`${i}/${month}`)
      let value1 = Math.floor(Math.random() * 100) + 300
      let value2 = Math.floor(Math.random() * 100) + 100
      let value3 = Math.floor(Math.random() * 100) + 10
      series1.push(value1)
      series2.push(value2)
      series3.push(value3)
    }
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 40,
          left: 20,
          right: 30,
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        series: [
          {
            name: '订票金额',
            type: 'line',
            showSymbol: false,
            areaStyle: {
              normal: {
                color: '#F3F7FC'
              }
            },
            barWidth: '80%',
            data: series1,
            itemStyle: {
              color: '#5F90FD'
            }
          }, {
            name: '检票金额',
            type: 'line',
            showSymbol: false,
            areaStyle: {
              normal: {
                color: '#F3F7FC'
              }
            },
            barWidth: '80%',
            data: series2,
            itemStyle: {
              color: 'rga(179,123,253)'
            }
          }, {
            name: '退票金额',
            type: 'line',
            showSymbol: false,
            areaStyle: {
              normal: {
                color: '#F3F7FC'
              }
            },
            barWidth: '80%',
            data: series3,
            itemStyle: {
              color: 'rgb(254,101,96)'
            }
          }
        ]
      }
    }
  }
}
</script>
