<template>
  <div class="area-rate" v-if="showChart">
    <m-chart class="chart" :config="config" :data="data"/>
  </div>
</template>

<script>
export default {
  name: 'AreaRate',
  props: {
    data: {
      type: Array,
      default() {
        return [
          {name: '3000亩以上', value: 258698.3},
          {name: '1000-3000亩', value: 21520},
          {name: '500-1000亩', value: 4963},
          {name: '100-500亩', value: 2210},
        ]
      }
    }
  },
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{c}亩'
        },
        shape: [
          {type: 'pie', radius: [30, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{d}%\n{b}'}, center: ['50%', '52%']}
        ]
      },
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true)
  },
}
</script>

<style lang="stylus" scoped>
.area-rate
  width 100%
  height 100%
  overflow hidden
</style>
