<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'],
        colors: ['#01a6ff', '#fff440', '#ffac40', '#406dff', '#6a42ff'],
        tooltip: {
          formatter: '{b}：{c}家 ({d}%)',
          confine: true,
        },
        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: 1241},
        {name: '湖北', value: 807},
        {name: '江西', value: 450},
        {name: '河南', value: 178},
        {name: '海南', value: 14},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  }
}
</script>

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