弹框中展示gojs报错

一. 实际问题

我们在弹框中展示 gojs 时，打开第一次没什么问题，但是关闭弹框在打卡时报错

二. 问题原因

一个 id 只能关联一个图例，我们之前已经关联了id 

三. 解决办法

我使用的是 vite + vue3.0 + elementPlus

Dialog 弹框内写法：

<el-dialog v-model="showDialog" :show-close="false" width="80%" :modal="false" style="height: 90%;" top="0">
    <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
            <div v-if="inId == 1"></div>
            <el-button v-if="inId == 2 || inId == 3" type="primary" :icon="ArrowLeftBold" size="small" style="margin-bottom: 6px;" @click="back"/>
            <div v-if="inId == 2 || inId == 3" style="font-size: 20px;font-weight: 600;color: #000;"> {
  { title }} </div>
            <div class="close" @click="close">
                X
            </div>
        </div>
    </template>
    <div style="height: 90%;">
        <charts v-if="inId == 1" @chooseId="chooseId" :showDialog="showDialog" @changeTitle="changeTitle"></charts>
        <one v-if="inId == 2" @chooseId="chooseId" @changeObj="changeObj" @changeTitle="changeTitle"></one>
        <three v-if="inId == 3" :obj="obj"></three>
    </div>
</el-dialog>

三个 gojs 图例做切换

在第一个子组件中  也就是打开弹框所展示的组件中

HTML 结构：

<div class="charts" id="charts">
    <div class="inCharts" id="myDiagramDiv">

    </div>
 </div>

JS：

watch(() => porps.showDialog, () => {
    if (porps.showDialog) {
        var child = document.getElementById('myDiagramDiv');
        var father = document.getElementById('charts');
        father.removeChild(child);
        var div = document.createElement('div');
        div.setAttribute('id', 'myDiagramDiv')
        div.style.height = '100%'
        father.appendChild(div);
        setTimeout(() => {
            init()
        }, 300)
    }
})
onMounted(() => {
    setTimeout(() => {
        init()
    }, 300)
})

这里的解决办法为：清楚掉之前的 div，然后新增一个与之前一样的 div，新出现的 gojs 与新 div 绑定即可