前⾔
本来想写echarts初始化函数的，但最近因为要写⼀个地图与柱状图的混合⽅式，也就是每个省的地图上要有柱状图显⽰。于是仔细使⽤了⼀下地图。
1、地图的⼀些基本属性就不介绍了，还是那些style
2、地图数据的获取以及Series的加载和其他没有什么⼤的差异。地图数据都在map.js中，都可以⾃⼰看，也可以⾃⼰根据格式获取响应的数据。
这⾥主要想处理的是图例颜⾊与地图底图颜⾊怎么设置的问题。
1、图例的颜⾊代码
refresh: function (newOption) {
if (newOption) {
this.option = newOption || this.option;
this.option.legend = formOption(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 && (pe === ecConfig.CHART_TYPE_PIE || pe === ecConfig.CHART_TYPE_FORCE || pe === ecConfig.CHART_TYPE_FUNNEL)) {
queryTarget = [
something.data,
something.series
];
} else {
queryTarget = [something.series];
}//可以看到下⾯这⼀句commend by danielinbiti，图例颜⾊先查series是否设置了lor这个属性进⾏判断，如果没有，则会按照默认的颜⾊设置取值。如果设置了，就按照设置的颜⾊取值。现在想设置，肯定需要在series中对应的坐标系中设置color = ItemStyleColor(this.deepQuery(queryTarget, 'lor'), something.seriesIndex, something.dataIndex, something.data); if (color && pe != ecConfig.CHART_TYPE_K) { this.setColor(itemName, color); } this._selectedMa 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: und(Math.random()*1000)},
{name: '天津',value: und(Math.random()*1000)},
{name: '上海',value: und(Math.random()*1000)}
]
}
3、这么设置有问题吗？我设置了⼀下发现有问题。图例颜⾊是对了，但是地图背景⾊不对，变成和第⼀个设置color的坐标系颜⾊⼀致了
于是查看地图源码(map.js)发现有这么⼀⾏代码
color = dataRange && !isNaN(value) ? Color(value) : null;
如果按照地图是china的话，这⾥的style可以理解成地图省份，lor没值,color如果区间拉到最下⾯也是没值(可以看到getColor⽅法返回的是null)，然后接着lor，所以两个都设
置了，是不到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: und(Math.random()*1000)},
{name: '天津',value: und(Math.random()*1000)},
{name: '上海',value: und(Math.random()*1000)}
]
}
总结：
或许没有发现其他隐形设置，但根据map中的代码，似乎也没有其他途径。希望echarts能够修正⼀下这个问题。把or的时候顺序换⼀下就⾏了。举⼿之劳。
好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。
发布评论