echarts图例颜色与地图底色

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

echarts图例颜色与地图底色相关推荐

echarts地图设置legend_echarts设置图例颜色和地图底色的方法实例
导读热词前言本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些s ...
echarts 自定义tooltip显示图例颜色
技术框架:react echarts默认的tooltip是自带图例颜色的,如下图: 可是很多时候,功能需求会要求提示框带单位或者调整样式.这个时候我们就需要用tooltip的formatter来自定义 ...
echarts改变图例颜色形状icon的用法，和svg图片信息的了解
前端问题记录大家好,我是你们的好朋友程序猿:铭文一.echarts图例的相关问题. 大家好,我是你们的好朋友程序猿:铭文先简单的说下:最近换了一个新的工作目前工作:做前端哈哈,但是后端还得搞写一 ...
Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
ECharts 全国各县市地图
ECharts 全国各县市地图获取底图数据 1.http://datav.aliyun.com/tools/atlas 2.http://geojson.io 加载地图数据 JavaScript 引 ...
Echarts折线图和地图（个人总结）
Echarts折线图和地图(个人总结) Echarts折线图和地图 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
目录一.大屏整体架构 Echarts + Flask + Bootstrap 1. 效果展示动态效果鼠标右键切换主题 2. 前端布局 Bootstrap 3. HTTP 服务端使用 Flask ...

echarts图例颜色与地图底色

echarts图例颜色与地图底色相关推荐

最新文章

热门文章