<template>
  <v-chart
    style="width:100%;height:80%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    let xData = []
    let series1 = []
    let series2 = []
    for (let i = -10; i < 11; i++) {
      let date = moment().locale('en').add(i, 'days').format('DD MMM')
      let value1 = Math.floor(Math.random() * 75) + 50
      let diff = Math.floor(Math.random() * 20) - 10
      let value2 = i > 0 ? 0 : value1 + diff
      xData.push(date)
      series1.push(value1)
      series2.push(value2)
    }
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: 10,
          right: 20
        },
        grid: {
          top: 40,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        series: [
          {
            z: 1,
            name: '预测',
            type: 'bar',
            barWidth: '80%',
            data: series1,
            barGap: '-81.25%',
            itemStyle: {
              color: '#CAE0F6'
            }
          }, {
            z: 2,
            name: '实售',
            type: 'bar',
            barWidth: '50%',
            data: series2,
            itemStyle: {
              color: '#4778A5'
            }
          }
        ]
      }
    }
  }
}
</script>
