<template>
    <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { pieOption } from "./options/pieOption.js";
import { deepClone } from "@/common/commonFun";

const props = defineProps({
    styleName: {
        type: String,
        default: "styleName1",
    },
    pieData: {
        type: Array,
        default: () => [],
    },
});

let chartDom = null;
let myChart = null;
let options = null;

const initData = () => {
    const pieOptionValue = deepClone(pieOption);
    const chartData = props.pieData;
    if (props.styleName === "styleName1") {
        const sum = chartData.reduce((per, cur) => per + cur.value, 0);
        const pieData = [];
        const gapData = {
            name: "",
            value: (1 * sum) / 100,
            itemStyle: {
                color: "transparent",
            },
        };
        for (let i = 0; i < chartData.length; i++) {
            pieData.push({
                ...chartData[i],
                itemStyle: {
                    borderRadius: 100,
                },
            });
            pieData.push(gapData);
        }
        pieOptionValue[props.styleName].title[0].text = chartData[0].value + '%';
        pieOptionValue[props.styleName].title[1].text = chartData[0].title;
        pieOptionValue[props.styleName].series[0].data = pieData;
    }else{
        console.log('487');
    }
    options = pieOptionValue[props.styleName];
    myChart.setOption(options);
};

onMounted(() => {
    myChart = echarts.init(chartDom);
    initData();
});
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>
