echarts圖例顏色與地圖底色
阿新 • • 發佈:2019-01-28
本來想寫echarts初始化函式的,但最近因為要寫一個地圖與柱狀圖的混合方式,也就是每個省的地圖上要有柱狀圖顯示。於是仔細使用了一下地圖。
1、地圖的一些基本屬性就不介紹了,還是那些style
2、地圖資料的獲取以及Series的載入和其他沒有什麼大的差異。地圖資料都在map.js中,都可以自己看,也可以自己根據格式獲取響應的資料。
這裡主要想處理的是圖例顏色與地圖底圖顏色怎麼設定的問題。
1、圖例的顏色程式碼
refresh: function (newOption) { if (newOption) { this.option = newOption || this.option; this.option.legend = this.reformOption(this.option.legend); this.legendOption = this.option.legend; var data = this.legendOption.data || []; var itemName; var something; var color; var queryTarget; if (this.legendOption.selected) { for (var k in this.legendOption.selected) { this._selectedMap[k] = typeof this._selectedMap[k] != 'undefined' ? this._selectedMap[k] : this.legendOption.selected[k]; } } for (var i = 0, dataLength = data.length; i < dataLength; i++) { itemName = this._getName(data[i]); if (itemName === '') { continue; } something = this._getSomethingByName(itemName); if (!something.series) { this._hasDataMap[itemName] = false; } else { this._hasDataMap[itemName] = true; if (something.data && (something.type === ecConfig.CHART_TYPE_PIE || something.type === ecConfig.CHART_TYPE_FORCE || something.type === ecConfig.CHART_TYPE_FUNNEL)) { queryTarget = [ something.data, something.series ]; } else { queryTarget = [something.series]; }//可以看到下面這一句commend by danielinbiti,圖例顏色先查詢series是否設定了itemStyle.normal.color這個屬性進行判斷,如果沒有,則會按照預設的顏色設定取值。如果設定了,就按照設定的顏色取值。現在想設定,肯定需要在series中對應的座標系中設定顏色。 color = this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.normal.color'), something.seriesIndex, something.dataIndex, something.data); if (color && something.type != ecConfig.CHART_TYPE_K) { this.setColor(itemName, color); } this._selectedMap[itemName] = this._selectedMap[itemName] != null ? this._selectedMap[itemName] : true; } } } this.clear(); this._buildShape(); },
2、於是可能產生了如下一個座標系設定程式碼
{ name: 'iphone3', type: 'map', mapType: 'china', selectedMode:'single', roam: true, showLegendSymbol:true, itemStyle:{ normal:{ label:{show:true} ,areaStyle:{color:'green'} //設定地圖背景色的顏色設定 ,color:'rgba(255,0,255,0.8)' //剛才說的圖例顏色設定 }, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)} ] }
3、這麼設定有問題嗎?我設定了一下發現有問題。圖例顏色是對了,但是地圖背景色不對,變成和第一個設定color的座標系顏色一致了
於是檢視地圖原始碼(map.js)發現有這麼一行程式碼
color = dataRange && !isNaN(value) ? dataRange.getColor(value) : null; style.color = style.color || color || this.getItemStyleColor(this.deepQuery(queryTarget, 'itemStyle.normal.color'), data.seriesIndex, -1, data)|| this.deepQuery(queryTarget, 'itemStyle.normal.areaStyle.color');
如果按照地圖是china的話,這裡的style可以理解成地圖省份,style.color沒值,color如果區間拉到最下面也是沒值(可以看到getColor方法返回的是null),然後接著找itemStyle.normal.color,所以兩個都設定了,是找不到areaStyle的設定。背景色就是第一個座標系的顏色。
4、然後再想怎麼解決。
看圖例的顏色設定機制,實際上和座標系的什麼圖形,什麼型別都沒關係,只要是座標系的格式就行。那是不是可以欺騙一下。
在series中,設定成這樣
{
name: 'iphone3',//add by danielinbiti,注意這裡名稱必須和座標系的名稱要一致
type:'', //設定為'',所有圖形都不會讀取
itemStyle:{
normal:{
color:'rgba(255,0,255,0.8)'
}
},
mapType:'none',
data:[]
},
{
name: 'iphone3',
type: 'map',
mapType: 'china',
selectedMode:'single',
roam: true,
showLegendSymbol:true,
itemStyle:{
normal:{
label:{show:true}
,areaStyle:{color:'green'}
},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)}
]
}
總結:
或許沒有發現其他隱形設定,但根據map中的程式碼,似乎也沒有其他途徑。希望echarts能夠修正一下這個問題。把or的時候順序換一下就行了。舉手之勞。