<template>
  <div class="medicine-flow" v-if="showChart">
    <m-chart :data="data" :config="config" :options="{legend: {top: '10%'}}"/>
    <Select v-model="type" class="custom-select" size="small" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
  </div>
</template>

<script>
export default {
  name: 'MedicineFlow',
  data() {
    return {
      showChart: false,
      type: '杀虫药',
      options: ['杀虫药'],
      config: {
        colors: ['#8c7eee', '#57e8ed', '#feb301', '#f49a8f', '#fda4bd', '#f3729b', '#f87be2', '#e95dc1'],
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
        ]
      },
      data: [
        {name: '江苏省', value: 24.2},
        {name: '四川省', value: 24},
        {name: '贵州省', value: 14},
        {name: '山东省', value: 14},
        {name: '安徽省', value: 14},
        {name: '浙江省', value: 10},
        {name: '陕西省', value: 10},
        {name: '辽宁省', value: 10},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  }
}
</script>

<style lang="stylus" scoped>
.medicine-flow
  width 100%
  height 100%
</style>
