<template>
  <v-chart
    style="width:100%;height:20%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    let xData = []
    let seriesData = []
    for (let i = 49; i >= 0; i--) {
      let month = moment().subtract(i, 'month').format('YYYY-MM')
      let value = Math.floor(Math.random() * 50) + 50
      xData.push(month)
      seriesData.push(value)
    }
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 0,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            }
          }
        ],
        yAxis: [
          {
            show: false,
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        series: [
          {
            z: 1,
            name: '实售',
            type: 'line',
            showSymbol: false,
            areaStyle: {
              normal: {
                color: 'rgba(202,224,246,.3)'
              }
            },
            barWidth: '80%',
            data: seriesData,
            itemStyle: {
              color: '#CAE0F6'
            }
          }
        ]
      }
    }
  }
}
</script>
