欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-10 23:26:50
前言 本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。 1、地图的一些基本属性...

前言

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

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