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实现你值得拥有
Sep 22 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
Vue+Django项目部署详解
May 30 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获得当前的脚本网址
2007/12/10 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python爬取读者并制作成PDF
2015/03/10 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
django 类视图的使用方法详解
2019/07/24 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
写自荐信三大法宝
2014/01/24 职场文书
新店开张活动方案
2014/08/24 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2014年民警工作总结
2014/11/25 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers