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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 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
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
Destoon模板制作简明教程
2014/06/20 PHP
初识laravel5
2015/03/02 PHP
php计算title标题相似比的方法
2015/07/29 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
javascript下function声明一些小结
2007/12/28 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python中强大的format函数实例详解
2018/12/05 Python
python爬虫要用到的库总结
2020/07/28 Python
Python如何输出警告信息
2020/07/30 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
成教自我鉴定
2013/10/27 职场文书
会展中心部门工作职责
2013/11/27 职场文书
元旦促销方案
2014/03/15 职场文书
诚信考试倡议书
2014/04/15 职场文书
物业管理工作方案
2014/05/10 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
资产运营委托书范本
2014/10/16 职场文书
丽江古城导游词
2015/02/03 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书