<!--  线 + 柱混合图 -->
<template>
    <div>
        <div :id="id" :class="className" :style="{ height, width }"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
    id: {
        type: String,
        default: "barChart1",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "400px",
        required: true,
    },
    height: {
        type: String,
        default: "400px",
        required: true,
    },
    render: {
        type: Function
    }
});

const chart = ref<any>("");
const setOption = (opt: any) => {
    opt = opt || {};
    
    if (props.render) {
        opt = props.render(opt);
    }
    
    chart.value.setOption(opt);
}
onMounted(() => {
    // 图表初始化
    chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
    );
    setTimeout(() => {
        setOption({});
    }, 400);
    // 大小自适应
    window.addEventListener("resize", () => {
        chart.value.resize();
    });
});

onActivated(() => {
    if (chart.value) {
        chart.value.resize();
    }
});
defineExpose({
    setOption
})
</script>
