echarts图例显示不全以及颜色的一些问题

今天同事用echarts做柱形图时遇到了一个问题，如下图所示：

明明是两个柱形的，却只显示一种类型，前面红色柱形的图例怎么也显示不出来，代码是这样写的：

这是以前写的代码，当然是错误的，所以就不贴代码，贴个图片看看就行。接下来就是正确的代码：

//Echars表格
function echarsResultsStatistics(){
	var startDate = $('#resultsTable_startDate').datebox('getValue');
	var endDate = $('#resultsTable_endDate').datebox('getValue');
	var eChart = echarts.init(document.getElementById('resultsStatistics'));
	eChart.setOption ({
		tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
 	    legend : {
			data : [ '销售量(元)', '实际收入(元)' ]
		},
	    calculable : true,
	    xAxis: [{
	        data: [],
	        axisLabel: {
	            interval:0,//显示全部文字
	            textStyle:{fontSize:11,color:"#00000"}//设置文字大小
	        },
	    }],
	    yAxis: [{
	    	 name:'单位:(元)',//设置Y轴单位
	    }],
	    series: [{
	        itemStyle: {
	          	normal:{
	          		color:['#c1232b','#b5c334'],
	          	}
	        },
			name : '销售量(元)',
			type : 'bar',
			barWidth:'40',
			label:{
		    	normal:{
	   			 show:true,
	   			 position:'top'
		    	}
		    },
			data : []
	    }, {
			name : '实际收入(元)',
			type : 'bar',
			barWidth:'40',
			label:{
		    	normal:{
	   			 show:true,
	   			 position:'top'
		    	}
		    },
			data : []
	    }]
	});
	var getParams={funcId:'queryTraderDataGrid',startDate:startDate,endDate:endDate};
	$.ajax({
	     type:"post",
	     url:'../../../../public.asp',
	     data:getParams,
	     dataType:'json',
	     success:function(data){ 
		     var objDate = eval(data); 
		     var StaffName=[];
		     var BidCount=[];
		     var RealIncome=[];
		     var array = {"StaffName":StaffName,"BidCount":BidCount,"RealIncome":RealIncome};
		     for(var i=0;i<objDate.items.length;i++){
		    	StaffName[i]=objDate.items[i].StaffName;
		     	BidCount[i]=objDate.items[i].BidCount;
		     	RealIncome[i]=objDate.items[i].RealIncome;
		     }
		     eChart.setOption({
		    	 xAxis: {
		             data: array.StaffName
		         },
		         series: [{
		        	 data: array.BidCount
		         },{
		        	 data: array.RealIncome
		         }]
		     });     
	     }
	});
}

与上图相比，我只是把ajax里的series里面的name，type等属性放到了一开始写的空白模型的setOption中的series属性里面了，而ajax里的series只叫它填入数据就好了，感觉很神奇呢~~具体什么原因其实我也不大清楚，要是哪位大神知道请在评论区留下你的高见呦，不胜感激！但是，你以为这样就完了么，其实上面的代码运行出来的结果是这个样子的：

仔细一看代码才发现问题在这里：

原来只是在第一个里面加了两种颜色，正确的方法应该是销售量和实际收入两个对象里分别加上这个itemStyle，里面只放一种颜色就可以了。当然还有另一种更简单的方法，那就是直接在legend的同级加上个color数组就可以了，如下：

color:["#c1232b","#b5c334"],
legend : {
    data : [ '销售量(元)', '实际收入(元)' ]
},

这样的话就大功告成啦~~~