<template>
  <div class="category-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: 10, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
    },
    label: {
      color: '#333',
    },
    series: [
      {
        type: 'pie',
        radius: [20, 80],
        roseType: 'area',
        center: ['40%', '50%'],
        label: {
          show: false,
        },
        itemStyle: {
          borderRadius: 5,
        },
      },
    ],
  },
  valData: [
    { value: 205, name: '肉类' },
    { value: 308, name: '水果' },
    { value: 359, name: '蔬菜' },
    { value: 452, name: '水产' },
    { value: 388, 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>
.category-charts {
  height: 100%;
}
</style>
