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

const chartsData = reactive({
  option: {
    color: ['#5cd2db', '#e4f116', '#6af116', '#2bb0ef', '#a56aef', '#efb56a'],
    title: {
      text: ' ',
      textStyle: {
        color: '#333',
      },
    },
    legend: {
      data: ['农副产品加工', '水果', '蔬菜', '水产', '禽畜肉蛋', '米面粮油'],
      right: '0', // 距离左侧10%的位置
      top: 'middle', // 垂直居中
      orient: 'vertical', // 图例垂直排列
      itemWidth: 10, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 10, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
    },
    label: {
      color: '#333',
    },
    series: [
      {
        type: 'pie',
        radius: ['20%', '65%'],
        roseType: 'area',
        center: ['40%', '50%'],
        label: {
          show: false,
        },
        itemStyle: {
          borderRadius: 5,
        },
        // animationDuration: 15000,
        // // 可选：设置动画缓动效果
        // animationEasing: 'elasticOut',
      },
    ],
  },
  valData: [
    { value: 37, name: '农副产品加工' },
    { value: 135, name: '水果' },
    { value: 41, name: '蔬菜' },
    { value: 141, name: '水产' },
    { value: 41, name: '禽畜肉蛋' },
    { value: 141, name: '米面粮油' },
  ],
});

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