<template>
  <div class="home-plant-breed-charts">
    <custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const plantBreed = reactive({
  option: {
    color: ['#3685fe', '#41b879', '#ffd500'],
    title: {
      text: ' ',
      textStyle: {
        color: '#333',
      },
    },
    legend: {
      data: ['农户', '农企/合作社', '生产加工企业', '农资企业', '种源企业'],
      right: '0', // 距离左侧10%的位置
      top: 'middle', // 垂直居中
      orient: 'vertical', // 图例垂直排列
      itemWidth: 15, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 12, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
    },
    label: {
      color: '#333',
    },
    series: [
      {
        type: 'pie',
        radius: [20, 80],
        roseType: 'area',
        center: ['40%', '50%'],
        label: {
          show: false,
        },
        itemStyle: {
          borderRadius: 5,
        },
      },
    ],
  },
  valData: [
    { value: 100, name: '农户' },
    { value: 105, name: '农企/合作社' },
    { value: 217, name: '生产加工企业' },
    { value: 217, name: '农资企业' },
    { value: 217, name: '种源企业' },
  ],
});

onMounted(() => {
  if (plantBreed.valData && plantBreed.length) {
    plantBreed.valData.forEach((m, index) => {
      let num = 100;
      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
    });
  }
});
</script>
<style lang="scss" scoped>
.home-plant-breed-charts {
  height: 100%;
}
</style>
