<template>
    <div ref="chartDom" class="pie-chart"></div>
</template>

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

const chartDom = ref(null);
let myChart = null;

const initData = () => {
    const newOption = deepClone(pieOption);
    myChart.setOption(newOption);
};

onMounted(() => {
    myChart = echarts.init(chartDom.value);
    initData();
});

</script>

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