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

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

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