echarts圖例顯示不全以及顏色的一些問題
阿新 • • 發佈:2019-01-02
今天同事用echarts做柱形圖時遇到了一個問題,如下圖所示:
明明是兩個柱形的,卻只顯示一種型別,前面紅色柱形的圖例怎麼也顯示不出來,程式碼是這樣寫的:
這是以前寫的程式碼,當然是錯誤的,所以就不貼程式碼,貼個圖片看看就行。接下來就是正確的程式碼:
與上圖相比,我只是把ajax裡的series裡面的name,type等屬性放到了一開始寫的空白模型的setOption中的series屬性裡面了,而ajax裡的series只叫它填入資料就好了,感覺很神奇呢~~具體什麼原因其實我也不大清楚,要是哪位大神知道請在評論區留下你的高見呦,不勝感激!但是,你以為這樣就完了麼,其實上面的程式碼執行出來的結果是這個樣子的://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 : [ '銷售量(元)', '實際收入(元)' ]
},
這樣的話就大功告成啦~~~