首先，需要新建一个HTML格式的文件。打开VS Code，依次点击左上角的File→New File，新建一个文件，如图
实战
我们将以下代码输入新建的文件中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入ECharts文件--> <script src="echarts.js"> </script> </head> </html>
按CTRL+S快捷键，会弹出“保存”按钮，将文件保存到指定的位置，并将文件命名为“Hello ECharts”，文件格式选择“HTML”。
这里相当于将原本没有格式的文件保存为.html格式的文件，保存后，文件内容得到HTML格式的语法高亮，如图 
之后补全其他内容，最终输入内容如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!--引入echarts.js --> <script src="echarts.js"></script> </head> <body> <!--为ECharts准备一个具备大小（宽高）的DOM --> <div id="main" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> //基于准备好的DOM，初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); //指定图表的配置项和数据 var option = { title: { text: '我的第一幅ECharts可视化图' }, tooltip: {}, legend: { data:['各产品销量情况'] }, xAxis: { data: ["产品A", "产品B", "产品C", "产品D", "产品E"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [900, 700, 550, 1000, 200] }] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html>
存HTML文件，并将之前由ECharts安装包解压得到的echarts.js文件放在该HTML文件所在的目录下
使用浏览器（这里使用的是谷歌浏览器）打开该HTML文件，显示结果
原理
首先，整个文档是HTML格式文件，所以使用的是HTML的语法。<!DOCTYPE>声明必须位于HTML5文档中的第一行，也就是位于标签之前，该标签告知浏览器文档所使用的HTML规范。如果你没学过HTML文件语法格式也没关系，HTML文件中有很多标签，且标签都是成对出现，例如在下一行出现的标签，代码的末尾也有一个标签，也就是说和是一对标签，代表HTML文档的开始与结束。
接下来，出现了如下代码块。
<head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js"></script> </head>
我们发现该部分代码块是包含在和标签对中的。标签用于定义文档的头部，它是所有头部元素的容器。文档的头部信息均可以放在该标签对中。例如接下来的规定了HTML文档的字符编码，
之后的代码块包含在标签中，标签包含了一个HTML文件的主体部分。
<body> <!--为ECharts准备一个具备大小（宽高）的DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> //基于准备好的DOM，初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); //指定图表的配置项和数据 var option = { title: { text: '我的第一幅ECharts可视化图' }, tooltip: {}, legend: { data:['各产品销量情况'] }, xAxis: { data: ["产品A","产品B","产品C","产品D","产品E"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [900, 700, 550, 1000, 200, 850] }] }; //使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body>
标签定义HTML文档中的分隔（division）或部分（section）。这里是作为一个容器来盛放ECharts的内容，这个容器的宽度为600px，高度为400px。
