<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
export default {
  data () {
    return {
      option: {
        color: ['#F5501E', '#EFDF2A', '#0AA6EB', '#7DB713', '#7A55BB', '#FE645F', '#FECA62', '#4ECAD0'],
        legend: {
          orient: 'vertical',
          top: 'center',
          left: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        grid: {
          top: 35,
          left: 0,
          right: 20,
          bottom: 0,
          containLabel: true
        },
        series: [
          {
            name: '票型销售统计',
            type: 'pie',
            center: ['60%', '50%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: 335, name: '成人票'},
              {value: 310, name: '学生票'},
              {value: 235, name: '优惠票'},
              {value: 200, name: '双人票'},
              {value: 180, name: '家庭票'},
              {value: 150, name: '携程特惠票'},
              {value: 100, name: '会员票'}
            ]
          }
        ]
      }
    }
  },
  mounted () {
  }
}
</script>
