在前一篇1.什么是echarts？中有说到，在官网下载到了echarts.min.js文件，在这里会有用到。
以前的自己总是看到想要的东西都要在各个地方搜刮一遍，年纪大了，终于知道自己想要的是什么，于是拒绝了很多的诱惑，现在看着网盘里满满的东西，充分理解自己逗傻不是被影响的，是本质。劝和我一样的童鞋们还是要有计划地比较好，毕竟老古话就说过，贪多嚼不烂……
因为懒，就不自己编什么数据了，直接拿了echarts原原本本的代码，自己在本地试了试。但这是有理由的，毕竟拿了别人的东西实现的荣光不会使自己骄傲自满！
请看代码，不要怀疑，就是这么简单：
<!DOCTYPE html>
<html>
<head>
<title>simpledemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例，如果调试代码可以发现，echarts在dom里使用了canvas技术在画图，如果怀着逗比的心情去看源码也可以发现canvas的身影（当然可以从搜索引擎或者官方介绍知道使用了canvas）。
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['质量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '质量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
结果如下图：
关于js语句中json的键值对对应图表中的含义就不说了，详情可以参考echarts的配置项手册。
