<template >
    <div :id="props.chartId" class="ring-chart" :style="{ height: props.height, width: props.width }"></div>
</template>

<script setup name="RingChart">
import { Pie } from '@antv/g2plot';
let ring = null

const props = defineProps({
    chartId: {
        type: String,
        default: 'ring-chart'
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    },
    options: {
        type: Object,
        default: {}
    },
    chartData: {
        type: Array,
        default: []
    }
})

watch(() => props.chartData, (val) => {
    ring.changeData(val)
}, { deep: true })

onMounted(() => {
    ring = new Pie(props.chartId, {
        data: props.chartData,
        ...props.options
    });

    ring.render();
})

</script>

<style lang="scss" scoped>
//...
</style>