echarts有数据但是无法绘制图表

碰到了一个上一任开发人员遗留下的bug，就是在第一次进页面的时候能正常渲染echarts图表，当请求接口数据发生改变时发现页面上一片空白啥都没有如下图；

前一任留下的代码类似下面这种

 <div id="chart" 
      style="position: relative; width: 500px; height: 500px;margin: auto;">
 </div>
<div style="text-align: center">
		<button id="btn" >模拟请求接口</button>
</div>

let option = {
	legend:{
		show:true
	},
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		name:"test",
		data: [],
		type: 'line'
	}]
};
let array = [820, 932, 901, 934, 1290, 1330, 1320];
function drawChart(list) {
	var mychart =""
	if(!list.length){
		$("#chart").html("暂无数据")
	}else{
		$("#chart").html("")
		mychart = echarts.init(document.getElementById("chart"));
		option.series[0].data = list
		mychart.setOption(option)
	}
};
drawChart(array);
//点击模拟请求数据
$("#btn").click(()=>{
	var list
	parseInt( 10*Math.random() ) < 5 ? (list=[]) : ( list=[720, 1832, 801, 734, 1090, 630, 1120]);
	drawChart(list)
});

f12打开开发者工具一看控制台

There is a chart instance already initialized on the dom 在dom中已经存在了一个chart实例；通过上边的代码可以看到在每次点击当有数据的时候就会再去创建chart实例，因此导致上述问题我们只需将代码改下即可
ps：高版本的echart.js对开者真的是太友好了，我接手的那个项目echart.js版本较低控制台压根就不提示，愣是卡了我半天

var mychart = echarts.init(document.getElementById("chart"));
function drawChart(list) {
	if(!list.length){
		$("#chart").html("暂无数据")
	}else{
		$("#chart").html("")
		option.series[0].data = list
		mychart.setOption(option)
	}
};

现在我们打开页面一看

现在一开始进来都不会绘图了，而且控制台也不报错，然后把函数又改了一下

function drawChart(list) {
	if(!list.length){
		mychart.clear()
		$("#chart").append("<p style='position:absolute;left:0;top:0'>暂无数据</p>")
	}else{
		if($("#chart p")) $("#chart p").remove();
		option.series[0].data = list
		mychart.setOption(option)
	}
};

终于好了，这也太难了，原因可能就是不能对实例化chart对象有什么特殊的操作吧，我这个小菜鸟也不是很清楚。