解决 Echarts 图表在旧容器上重新渲染不出来的问题

今天修改项目时，由于使用了 Echarts 图表库，在原先的基础上，加上了 切换tab标签 和 根据搜索内容重新渲染图表 的需求，由于是异步获取数据后更新渲染图表，然后发现图表渲染不出来的问题，由此记录下解决问题的过程。

问题描述

根据异步获取到的数据重新渲染图表，比如 Echarts 容器标签如下：

<div id="chartId"></div>

当搜索结果没有数据时，输出一段话提示用户：

<div id="chartId">
	<p>暂无数据</p>
</div>

有数据时，重新渲染图表，替换容器标签中内容：

<div id="chartId">
	<p>暂无数据</p>
</div>

<script>
	var chartEle = document.getElementById('chartId');
    var myChart = echarts.init(chartEle);
    myChart.setOption(option);
</script>

但是此时发现图表并没有渲染出来，还是显示·暂无数据，查看容器标签元素可以看到，前面首次渲染时 Echarts 自动生成了一个名为 _echarts_instance_ 的实例属性：

<div id="chartId" style="..." _echarts_instance_="ec_1611814579881">
	<p>暂无数据</p>
</div>

该属性值其实就是当前 Echarts 的实例 ID，这样每个实例对应了唯一的 ID，然后就进行后边的渲染操作。
再查看官方文档的 init API，发现已经找到问题的根源（怪自己以前没有认真看文档…）：

这样就好办了，既然每次实例化都会在容器标签上产生一个唯一的 echartsInstance ID，那重新渲染之前把容器标签的 _echarts_instance_ 属性移除，重新 echarts.init 后就会自动生成一个新的 echartsInstance ID ，此后图表就可以正常渲染了：

<div id="chartId">
	<p>暂无数据</p>
</div>

<script>
	var chartEle = document.getElementById('chartId');
	chartEle.removeAttribute('_echarts_instance_'); // 移除容器标签的 '_echarts_instance_' 实例属性，使用echarts.init重新生成一个新的实例ID
    var myChart = echarts.init(chartEle);
    myChart.setOption(option);
</script>