1. 程式人生 > >echarts圖例顏色與地圖底色

echarts圖例顏色與地圖底色

本來想寫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的時候順序換一下就行了。舉手之勞。