echarts设置图例颜色和地图底色的方法实例

分享时间:2018-09-07 4392 热度℃

本来想写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);   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的时候顺序换一下就行了。举手之劳。


本文标签:
返回顶部