echarts 折线对比图实例

定义div

<div id="moreColumn" style="width: 80%; height: 70%;float: left;"></div>

定义echarts
 

var myChart = echarts.init(document.getElementById('moreColumn'));

定义方法用于生成折线图：

function loadColumn(myChart, title, thistype, year1,filterRules,year2) {
		// 显示标题，图例和空的坐标轴
		myChart.setOption({
			color : [ '#6dd8da', '#b6a2de', '#58afed', '#F3D7B5', '#98FB98', '#FFA500',
				'#E9967A', '#808080', '#F0E68C', '#DB7093', '#9ACD32' ],
			title : {
				text : title
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : []
			},
			toolbox : {
				show : true,
				feature : {
					magicType : {
						show : true,
						type : [ 'stack', 'tiled' ]
					},
					saveAsImage : {
						show : true
					}
				}
			},
			xAxis : [{
				axisTick: {
	                alignWithLabel: true
	            },
	            axisLine: {
	                onZero: false,
	                lineStyle: {
	                    
	                }
	            },
				data : []
			},{
				axisTick: {
	                alignWithLabel: true
	            },
	            axisLine: {
	                onZero: false,
	                lineStyle: {
	                    
	                }
	            },
				data : []
			}],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : []
		});
		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
		var names = []; //类别数组（实际用来盛放X轴坐标值）
		$.ajax({
			url : "${ctx}/_data/visual/inout/linecom",
			type : "post",
			data : {
				year1 : year1,
				year2 : year2,
				type : thistype,
				filterRules: filterRules
			},
			dataType : "json", //返回数据形式为json
			success : function(result) {
				console.log(result)
				if (result.length == 0) {
					myChart.hideLoading(); //隐藏加载动画
					myChart.setOption({ //加载数据图表
						series : [],
						legend : {
							data : []
						},
					}); 
				} else {
					var servicedata = [];
					//创建一个数组，用来装对象传给series.data，因为series.data里面不能直接写for循环
					var xtype = [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' ]; //xtype存放的是横坐标，月
					var xtype1 = [];
					var xtype2 = [];
					var ytype = []; //ytype存放的是每一条数据显示的name，品种
					if (isEmpty(year1) && isEmpty(year2)) {
						var myDate = new Date();
						year1 = myDate.getFullYear();
						year2 = myDate.getFullYear()-1;
					}else if (isNotEmpty(year1) && isEmpty(year2)){
						year2 = year1 - 1;
					}else if (isNotEmpty(year2) && isEmpty(year1)){
						year1 = year2 + 1;
					}
					for (var i = 0; i < xtype.length; i++) {
						xtype1[i] = year1.toString() + "-" + xtype[i];
						xtype2[i] = year2.toString() + "-" + xtype[i];
					}
					for (var i = 0; i < result.length; i++) {
						if (ytype.indexOf(result[i].year +"-"+result[i].name) == -1) {
							ytype.push(result[i].year +"-"+result[i].name);
						}
					}
					for (var i = 0; i < ytype.length; i++) {
						var counts = [];
						for (var j = 0; j < xtype.length; j++) {
							counts.push(0.00);
						}
						if (ytype[i].substring(0,4) == year1) {
							var obj = new Object();
							obj.name = ytype[i];
							obj.data = counts;
							obj.type = 'line';
							obj.smooth = true;
							servicedata[i] = obj;
						}else if (ytype[i].substring(0,4) == year2){
							var obj = new Object();
							obj.name = ytype[i];
							obj.data = counts;
							obj.type = 'line';
							obj.xAxisIndex = 1,
							obj.smooth = true;
							servicedata[i] = obj;
						}
						
					}
					for (var i = 0; i < result.length; i++) {
						for (var j = 0; j < ytype.length; j++) {
							if (ytype[j] == result[i].year +"-"+result[i].name) {
								for (var k = 0; k < xtype.length; k++) {
									if (result[i].month == match(xtype[k])) {
										servicedata[j].data[k] = parseFloat(servicedata[j].data[k]) + parseFloat(result[i].count);
									}
								}
							}
						}
					}
					myChart.hideLoading(); //隐藏加载动画
					myChart.setOption({ //加载数据图表
						xAxis : [
							{
								type : 'category',
								axisTick: {
					                alignWithLabel: true
					            },
					            axisLine: {
					                onZero: false,
					                lineStyle: {
					                }
					            },
								axisPointer: {
					                label: {
					                    formatter: function (params) {
					                    	
					                    }
					                }
					            },
								data : xtype1
							},
							{
								type : 'category',
								axisTick: {
					                alignWithLabel: true
					            },
					            axisLine: {
					                onZero: false,
					                lineStyle: {
					                }
					            },
								axisPointer: {
					                label: {
					                    formatter: function (params) {
					                    	
					                    }
					                }
					            },
								data : xtype2
							}
						],
						title : {
							subtext : ''
						},
						series : servicedata,
						legend : {
							data : ytype
						},
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				$.messager.show({
					title : '很抱歉',
					msg : '折线图无数据'
				});
				myChart.hideLoading();
			}
		});
	}
	;

其中在setoption之前都是将所需要的数据拼接成数组传过去，

查询语句：

function selectOk() {
		filterRules = "";
		var year1 = $('#year3').val();
		var year2 = $('#year3').val();
		var grainAdmin = $('#search-grainAdmin3').val();
		var grainOwner = $('#search-grainOwner3').val();
		var grainStore = $('#search-grainStore3').val();
		var storePoint = $('#search-storePoint3').val();
		var storeHouse = $('#search-storeHouse3').val();
		if (grainAdmin) {
			filterRules += '{"field":"grainAdmin","op":"equal","value":"'
					+ grainAdmin + '"},'
		}
		if (grainOwner) {
			filterRules += '{"field":"grainOwner","op":"equal","value":"'
					+ grainOwner + '"},'
		}
		if (grainStore) {
			filterRules += '{"field":"grainStore","op":"equal","value":"'
					+ grainStore + '"},'
		}
		if (storePoint) {
			filterRules += '{"field":"storePoint","op":"equal","value":"'
					+ storePoint + '"},'
		}
		if (storeHouse) {
			filterRules += '{"field":"storeHouse","op":"equal","value":"'
					+ storeHouse + '"},'
		}
		if (filterRules) {
			filterRules = filterRules.substring(0, filterRules.length - 1);
			filterRules = '[' + filterRules + ']';
		}
		if (myChart != null && myChart != "" && myChart != undefined) {
			myChart.dispose();
		}
		myChart = echarts.init(document.getElementById('moreColumn'));
		var thistype = 2;
		loadColumn(myChart, "结存同比", thistype, year1,filterRules,year2);
	}

此处我运用的是我需要的框架传的数据，

最终效果图：