<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
export default {
  data () {
    return {
      option: {
        color: ['#F5501E', '#0AA6EB'],
        legend: {
          orient: 'vertical',
          bottom: 'center',
          right: '20%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        grid: {
          top: 10,
          left: 10,
          right: 10,
          bottom: 0,
          containLabel: true
        },
        series: [
          {
            name: '性别分析',
            type: 'pie',
            center: ['40%', '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: 60, name: '男性'},
              {value: 40, name: '女性'}
            ]
          }
        ]
      }
    }
  },
  mounted () {
  }
}
</script>
