关于ECharts框架的基本使用

第一步在官网（http://echarts.baidu.com/）下载echarts插件，

下载最新版本即可。
第二步在html里引入 echarts.js文件，``

第三部创建一个容器，设置宽高并且设置属性。

实际代码： var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	 var option = {
		title: {
			text: '机票价格走势图',
			textStyle: {
				fontSize: '18',
				color: '#4c4c4c',
				fontWeight: 'bolder'
			}
		},
		tooltip: {
			trigger: 'axis'
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['12-01', '12-10', '12-20', '12-30', '01-01', '01-10', '01-20', '01-30', '02-01', '02-10', '02-20', '02-28'],
			axisLabel: {
				interval: 0
			}
		},
		yAxis: {
			type: 'value',
			min: 0,
			max: 1000,
		},
		//数据
		series: [{
				name: '北京-上海',
				type: 'line',
				data: [723, 642, 618, 745, 648, 649, 700, 745, 618, 765, 779, 600],
				//平均线
				markLine: {
					data: [{
						type: 'average',
						name: '平均值'
					}]
				},
				//线的颜色和小圆圈的颜色
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#6be6c1'
						}
					}
				},
			}, {
				name: '北京-长沙',
				type: 'line',
				data: [443, 352, 418, 345, 448, 349, 300, 352, 418, 445, 348, 449, 300],

				markLine: {
					data: [{
						type: 'average',
						name: '平均值'
					}]
				},
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#626c91'
						}
					}
				},
			}, {
				name: '北京-深圳',
				type: 'line',
				data: [943, 752, 718, 885, 848, 890, 900, 972, 998, 825, 888, 949, 800],

				markLine: {
					data: [{
						type: 'average',
						name: '平均值'
					}]
				},
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#3fb1e3'
						}
					}
				},
			},
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	效果图：![在这里插入图片描述](https://img-blog.csdn.net/20181025112517829?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDI0NTMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
	如果需要实现其他的样式可以在本网站文档-API里查看其它属性。