<template>
  <div class="farm-rate" v-if="showChart">
    <m-chart :config="config" :data="data" :options="{legend: {top: '25%'}}"/>
  </div>
</template>

<script>
export default {
  name: 'FarmRate',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#feec40', '#05bbfd', '#fe4949'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}公顷'
        },
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', startAngle: 135, radius: [40 * Number((screen.height / 800).toFixed(1)), 55 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%'], label: {show: true, formatter: '{d}%'}}
        ],
      },
      data: [
        {name: '养护型', value: 62485},
        {name: '增殖型', value: 29000},
        {name: '休闲型', value: 31244},
      ]
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  }
}
</script>

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