echarts第二次绘制显示空白的解决方案

1、描述

这是一个动态绘制echarts的弹窗子页面。

父页面有很多功能属性，在点击每个功能属性时进行弹窗，然后根据配置动态绘制各功能属性的echarts类型及数据展示。

第一次打开弹窗echarts正常显示，但是关闭后重新打开就显示空白。

echarts绘制的页面dom代码如下

<div class="contentBody fl">
      <div class="echartsBody" id="echartsBody"></div>
</div>

2、解决方案

首先，可以确定的是每次打开该弹窗代码能走通，从echarts数据传递到获取echarts绘制指定dom再到echarts.setOption(option, true);都没问题。

尝试过网上很多方法，有把setOption第二个参数设置成true的，有把div中_echarts_instance_属性删除的，但是都没有用。这边的做法是动态删除dom然后创建dom,dom渲染完成后再进行其他操作。

$(".contentBody")
.find(".echartsBody")
.remove()
.end()
.append(
"<div class='echartsBody' id='echartsBody' style='height:440px'></div>"
);
 this.$nextTick(() => {
     ...
 }）