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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
看看“疫苗查询”小程序有温度的代码
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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php实现telnet功能示例
2014/04/08 PHP
动态控制Table的js代码
2007/03/07 Javascript
Gird事件机制初级读本
2007/03/10 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
canvas时钟效果
2017/02/16 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
读书活动总结范文
2014/04/26 职场文书
实践单位评语
2014/04/26 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
高三毕业评语
2014/12/31 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书