<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
export default {
  data () {
    return {
      option: {
        color: ['#FECA62', '#0AA6EB', '#FE645F'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['订单金额', '检票张数', '退票张数'],
          orient: 'horizontal',
          right: '10%'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['驴妈妈', '携程', '飞猪', '同城', '艺龙', '淘宝']
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '实售金额',
            max: 500,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: 'value',
            scale: true,
            name: '实售金额',
            max: 500,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '订单金额',
            type: 'bar',
            barGap: 0,
            data: [320, 332, 301, 334, 390, 290]
          },
          {
            name: '检票张数',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 200]
          },
          {
            name: '退票张数',
            type: 'bar',
            data: [20, 10, 40, 30, 20, 10]
          }
        ]
      }
    }
  },
  mounted () {
  }
}

</script>
