本来想写echarts初始化函数的，但最近因为要写一个地图与柱状图的混合方式，也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。
1、地图的一些基本属性就不介绍了，还是那些style
2、地图数据的获取以及series的加载和其他没有什么大的差异。地图数据都在map.js中，都可以自己看，也可以自己根据格式获取响应的数据。
这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题。
1、图例的颜色代码
[javascript] view plain copyrefresh: 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、于是可能产生了如下一个坐标系设置代码
[javascript] view plain copy{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)发现有这么一行代码
[javascript] view plain copycolor = 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中，设置成这样
[javascript] view plain copy{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的时候顺序换一下就行了。举手之劳。
西安飞凡网络技术咨询有限公司
400 011 2010