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

<script>
export default {
  name: 'CompanyRate',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#0f4aff', '#ff9e45', '#edfe63', '#8f45ee', '#05f8e8'],
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 80 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['30%', '50%']}
        ]
      },
      data: [
        {name: '江苏', value: 900},
        {name: '湖北', value: 847},
        {name: '江西', value: 400},
        {name: '海南', value: 300},
        {name: '河南', value: 200},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  }
}
</script>

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