新疆林业厅网站百度论坛发帖

问题描述：

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

问题分析：

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

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

问题原因：

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

解决方法：

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

具体实现：

<template>
<Sidebarv-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>