vue3环境下，三方组件中使用echarts，无法显示问题

问题描述：

vue3中，使用了三方组件primevue的侧边栏Sidebar，在其中注册echarts dom节点，无法显示，提示dom不存在

问题分析：

使用原生div，通过document.getElementById('')，将echarts注册其中，发现可以正常显示；

使用primevue的sidebar，在其中注册div，则无法获取

问题原因：

三方组件还未渲染该节点，所以找不到echarts要绑定的dom

解决方法：

await nextTick()后，开始注册echarts dom，此时三方组件中的dom才能被找到

具体实现：

<template>
<Sidebar
        v-model:visible="visibleRight"
        header="Right Sidebar"
        position="right"
        class="w-full md:w-10 lg:w-8"
    >
        <div class="flex align-items-center justify-content-center h-full">
            <div ref="echartsDom"></div>
        </div>
</Sidebar>
</template>
<script setup>
import { ref } from 'vue';

const echartsDom = ref(null)
await nextTick();
var myChart = echarts.init(echartsDom.value, null, {
    width: 700,
    height: 500,
});
// 绘制图表
myChart.setOption({
    title: {
        text: "变更问题分类",
    },
    tooltip: {},
    xAxis: {
        axisLabel: {
            ormatter: "{value}",
            align: "left",
            rotate: -45,
        },
        data: [
            "101 尺寸",
            "102 结构",
            "103 材料",
            "104 装调验证",
            "105 外购件",
            "106 间接返修",
            "107 成本",
            "108 客户变更",
            "109 改造项目",
        ],
    },
    yAxis: {},
    series: [
        {
            name: "问题单数",
            type: "bar",
            data: [1, 2, 3, 4, 5, 6, 7, 8, 19],
        },
    ],
});
</script>