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是否设置了or这个属性进行判断，如果没有，则会按照默认的颜色设置取值。如果设置了，就按照设置的颜色取值。现在想设置，肯定需要在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的时候顺序换一下就行了。举手之劳。

　　好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。