在创建一个ECharts图表之前，需要进行的开发前准备工作，包括获取ECharts、下载Google浏览器和创建项目，具体如下。
- 获取ECharts
获取ECharts有以下几种方法，可以根据情况进行选择。 （1）最直接的方法是在ECharts官网中挑选适合的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，也可以直接下载完整版本；对于开发环境，建议下载源代码版本，包含了常见的错误提示和警告。 （2）由CDN（Content Delivery Network）引入，可以在cdnjs、npmcdn或国内的bootcdn中找到ECharts的最新版本。这种方法的优点是无须下载文件，不必在本地电脑中保存ECharts库文件，直接通过网络引用即可。 （3）在ECharts的GitHub上下载最新的Release版本（发布版本），在解压后的文件夹里的dist目录下可以找到最新版本的echarts库。
- 下载Google浏览器 在使用ECharts时，由于所创建的图表是一张张的网页，所以需要使用浏览器查看页面结果。用户可以在普通浏览器的搜索栏中输入“下载Google浏览器”，单击其中合适的下载链接。 在图所示的Google浏览器官网下载界面中，单击下载网页中的“下载Chrome”按钮；在弹出的“新建下载任务”对话框中，再单击下方的“下载”按钮。下载完成后，直接双击下载可执行的安装文件的图标，即可开始安装Google浏览器。
3 创建第一个ECharts图表
获取ECharts库文件后，创建ECharts图表的步骤如下。
（1）在.html文件中，引入echarts.js库文件。ECharts的引入方式像JavaScript库文件一样，使用script标签引入即可。此处需要注意echarts.js库文件的存放路径，如果找不到存放路径，那么将无法显示图表。通过CDN方式引入库文件，这种引入方式的好处是不需要下载echarts.js库文件，但是需要实时连接网络。 （2）准备一个指定了大小 的div容器，即具备weight和height。ECharts图形是基于DOM进行绘制的，所以在绘制图形前要先绘制一个DOM容器div来承载图形。在添加了div容器后，需要设置它的基本属性：宽（weight）与高（height）。这两个属性决定了绘制的图表大小。绘制一个div容器并设置容器的样式，容器可以设置的样式并不仅限于宽与高，还可以设置其他属性，如定位等。
（3）使用init方法初始化容器。通过步骤（1）引入echarts.js库文件后，会自动创建一个全局变量echarts。创建全局变量echarts有若干方法。基于准备好的DOM，通过echarts.init方法可以初始化ECharts实例。 （4）设置图形配置项和数据。option的设置是ECharts中的重点和难点，option的配置项参数等设置决定了绘制出的是什么样的图形。第3章中将会对option的配置项参数进行详细的说明，此处通过配置option项绘制一个简单的柱状图。 （5）使用指定的配置项和数据显示渲染图表。在绘制ECharts图表的过程中，setOption是执行绘制动作的方法，为初始化的myChart设置option进行图表绘制。
通过以上5个步骤，在网页中创建ECharts图表后，需要用网页打开。
源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/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: '这里是绘制图表的标题',
subtext: '这里是副标题'
},
tooltip: {},
legend: { //配置图例组件，一个echarts图表中可以存在多个图例组件
data: ['销量']
},
xAxis: { //配置x轴坐标系
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {}, //配置y轴坐标系
series: [{ //配置系列列表，每个系列通过type控制该系列图表类型
name: '销量',
type: 'bar', //设置柱状图
data: [5, 20, 36, 10, 10, 20]
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
