ECharts框架的基本使用

1.第一步先下载一个echarts插件，
下载地址：http://echarts.baidu.com/

根据自己的需要任意下载一个就可；

2.第二步；

下载之后就是一个js文件，

把它放到你创建的文件夹里面

然后再引入进你写的html里面

引入之后就可编写你的HTML代码了，

3.第三步，
创建一容器，给他设置宽高，给他一个id；
例如：

<div id="main" style="width: 800px;height:400px;"></div>

以下为折线图实现的完整代码

		<div id="main" style="width: 800px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '机票价格走势图'
				},
				tooltip: {},
				
				
				//X轴的数值
				xAxis: {
					data: ["12-1", "12-10", "12-20", "12-30", "01-01", "01-10", "01-20", "01-30", "02-01", "02-10", "02-20", "02-30"]
				},
				yAxis: {
					min: 0,
					max: 1000
				},
				series: [{
					name: '销量',
					type: 'line',
					data: [973, 752, 718, 885, 848, 890, 900, 972, 998, 825, 888, 949,800],
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					 
                     lineStyle:{
                     	color:'blue'
                     },
                         
				},{
					name: '销量',
					type: 'line',
					data: [723, 642, 618, 645, 648, 649, 700, 745, 618, 765, 779, 600],
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					 lineStyle:{
                     	color:'pink'
                     },
				},{
					name: '销量',
					type: 'line',
					data: [443, 352, 418, 345, 448, 349, 300,352, 418, 445, 348, 449,300],
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					},
					 lineStyle:{
                     	color:'green'
                     },
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>

实现的效果为；

最后的是>>如果有些属性不知道的话可以去API里面找，还有多种实例等。。。