<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
export default {
  data () {
    return {
      option: {
        color: ['#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: ['100次以上', '50~100次', '30~49次', '20~29次', '10~19次', '5~9次', '2~3次', '1次']
          }
        ],
        yAxis: [
          {
            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, 100, 200]
          },
          {
            name: '女性',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 200, 30, 50]
          }
        ]
      }
    }
  },
  mounted () {
  }
}

</script>
