前言
本來想寫echarts初始化函數(shù)的，但最近因為要寫一個地圖與柱狀圖的混合方式，也就是每個省的地圖上要有柱狀圖顯示。于是仔細使用了一下地圖。
1、地圖的一些基本屬性就不介紹了，還是那些style
2、地圖數(shù)據(jù)的獲取以及Series的加載和其他沒有什么大的差異。地圖數(shù)據(jù)都在map.js中，都可以自己看，也可以自己根據(jù)格式獲取響應的數(shù)據(jù)。
這里主要想處理的是圖例顏色與地圖底圖顏色怎么設置的問題。
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這個屬性進行判斷，如果沒有，則會按照默認的顏色設置取值。如果設置了，就按照設置的顏色取值。現(xiàn)在想設置，肯定需要在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、于是可能產(chǎn)生了如下一個坐標系設置代碼
{ 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、這么設置有問題嗎？我設置了一下發(fā)現(xiàn)有問題。圖例顏色是對了，但是地圖背景色不對，變成和第一個設置color的坐標系顏色一致了
于是查看地圖源碼(map.js)發(fā)現(xiàn)有這么一行代碼
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如果區(qū)間拉到最下面也是沒值(可以看到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)} ]}總結(jié)：
或許沒有發(fā)現(xiàn)其他隱形設置，但根據(jù)map中的代碼，似乎也沒有其他途徑。希望echarts能夠修正一下這個問題。把or的時候順序換一下就行了。舉手之勞。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點
疑難解答
