今天同事用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
		         }]
		     });     
	     }
	});
}
 

仔細一看程式碼才發現問題在這裡：

原來只是在第一個裡面加了兩種顏色，正確的方法應該是銷售量和實際收入兩個物件裡分別加上這個itemStyle，裡面只放一種顏色就可以了。當然還有另一種更簡單的方法，那就是直接在legend的同級加上個color陣列就可以了，如下：

color:["#c1232b","#b5c334"],
legend : {
    data : [ '銷售量(元)', '實際收入(元)' ]
},