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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JS实现的视频弹幕效果示例
Aug 17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
看看“疫苗查询”小程序有温度的代码
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
下载文件的点击数回填
2006/10/09 PHP
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
动态加载js的几种方法
2006/10/23 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
Python更新所有已安装包的操作
2020/02/13 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
大学生饮食连锁店创业计划书
2014/01/17 职场文书
小学生作文评语
2014/04/18 职场文书
民政局个人整改措施
2014/09/24 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
谢师宴答谢词
2015/01/05 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
心灵点滴观后感
2015/06/02 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript