
<template>
    <div id="piechart" style="width: 100%; height: 100%">

    </div>
</template>
<script setup>
import * as echarts from "echarts";
import {
    ref,
    defineProps,
    reactive,
    onMounted,
    watch,
    defineExpose,
    nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const props = defineProps({
    pieData: {
        type: Array,
        default: []
    },


});
watch(
    () => props.pieData,
    (val) => {
        getBin(val);
    }
)
onMounted(() => {


});
const getBin = (data) => {

    var chartDom = document.getElementById('piechart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },

        legend: {
            orient: 'vertical',
            top: '5%',
            x: 'left',
            textStyle: {
                color: '#000'
            }
        },
        series: [
            {
                name: 'JVM',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 2,
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: true,
                    formatter: '{d}%'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: data
            }
        ]
    };

    option && myChart.setOption(option);
    //自适应
    chartAdaptation(myChart);
};
    // defineExpose({ getBin });
</script>
<style scoped>
canvas {
    left: 58px !important;
    top: 42px !important;
    width: 251px !important;
    height: 242px !important;
}
</style>

