<template>
    <div>
        <div id="scatter" style="height: 400px;"></div>
    </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue"
import * as echarts from "echarts"

let scatterChart = ref()
onMounted(() => {
    scatterChart = echarts.init(document.getElementById('scatter'))
    setChartData()
    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
    setTimeout(() => {
        resizeChart()
    },0)
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
})
const props = defineProps({
    scatterData: {
        type: Object,
    }
})

function setChartData() {
    const option = {
        xAxis: {},
        yAxis: {},
        series: [
            {
                symbolSize: 20,
                data: props.scatterData,
                type: 'scatter'
            }
        ]
    }
    scatterChart.setOption(option)
}

function resizeChart() {
    if (scatterChart) {
        scatterChart.resize()
    }
}
defineExpose({ resizeChart })


</script>

<style scoped>

</style>
