官方教程的异步执行代码为什么不能运行,即使补全代码也有问题echarts 柱状配置项内容和展示

根本无法显示

配置项如下
      <!Doctype html>
<html>
<head>
   	<meta charset="utf-8">
	<title>this is a demo</title>
	<!--引入echart-->
</head>
	<body>
		<div id="main" style="height:400px"></div>
		<script src="echarts.js"></script>
		<script>
		function fetchData() 
		{
			// 通过 setTimeout 模拟异步加载
			myChart.setOption(
			{
				xAxis: 
				{
					data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
				series: 
				[{
					// 根据名字对应到相应的系列
					name: '销量',
					data: [5, 20, 36, 10, 10, 20]
				}]
			});
		}	
		/*
		function fetchData()
		{
			{
				categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
				data: [5, 20, 36, 10, 10, 20]
			}
		}
		*/
		var myChart = echarts.init(document.getElementById('main'));
		// 初始 option
		option = 
		{
			title: {text: '异步数据加载示例'},
			tooltip: {},
			legend: {data:['销量']},
			xAxis: {data: []},
			yAxis: {},
			series: 
			[{
				name: '销量',
				type: 'bar',
				data: []
			}]
		};
		
		//主程序
			myChart.setOption
			({
				title: {text: '异步数据加载示例'},
				tooltip: {},
				legend: {data:['销量']},
				xAxis: {data: []},
				yAxis: {},
				series: 
				[{
					name: '销量',
					type: 'bar',
					data: []
				}]
			});	
		fetchData()
		{
				

			
		}
		</script>
    </body>
</html>
    
截图如下