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


Posted in Javascript onAugust 01, 2018

前言

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

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

Javascript 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
javascript string字符串优化问题
Jul 31 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
看看“疫苗查询”小程序有温度的代码
Jul 31 #Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 #Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 #Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 #Javascript
Node.js log4js日志管理详解
Jul 31 #Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
JS实现移动端触屏拖拽功能
Jul 31 #Javascript
You might like
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
JavaScript prototype属性深入介绍
2012/11/27 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python代码区分大小写吗
2020/06/17 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
大学生创业项目方案
2014/03/08 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
如何自己动手写SQL执行引擎
2021/06/02 MySQL
redis protocol通信协议及使用详解
2022/07/15 Redis