构建图表

<template>
    <div ref="chartRef" class="h-full w-full"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
    
const chartRef = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
  
const initCharts = () => {
    if (chartRef.value) {
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(chartRef.value);
        const option = {
            // 设置图表的属性和数据
        };
        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);
    }
}

// 当窗口大小改变时，图表的大小自适应
window.addEventListener("resize", function () {
    if (myChart) {
        myChart.resize();
    }
});

onMounted(() => {
    initCharts();
});  
</script>