<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 } from 'vue';

const plantBreed = ref({
  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: 2,
        },
      },
    ],
  },
  valData: [
    { value: 100, name: '种植面积' },
    { value: 105, name: '养殖面积' },
    { value: 217, name: '种植基地' },
    { value: 315, name: '养殖基地' },
  ],
});
</script>
<style lang="scss" scoped>
.home-plant-breed-charts {
  height: 100%;
}
</style>
