echarts图例颜色与地图底色 - CSDN博客
echarts图例颜色与地图底色
本来想写echarts初始化函数的，但最近因为要写一个地图与柱状图的混合方式，也就是每个省的地图上要有柱状图显示。于是仔细使用了一下地图。
1、地图的一些基本属性就不介绍了，还是那些style
2、地图数据的获取以及Series的加载和其他没有什么大的差异。地图数据都在map.js中，都可以自己看，也可以自己根据格式获取响应的数据。
这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题。
1、图例的颜色代码
refresh: function (newOption) {
if (newOption) {
this.option = newOption || this.
this.option.legend = this.reformOption(this.option.legend);
this.legendOption = this.option.
var data = this.legendOption.data || [];
var queryT
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. i & dataL i++) {
itemName = this._getName(data[i]);
if (itemName === '') {
something = this._getSomethingByName(itemName);
if (!something.series) {
this._hasDataMap[itemName] =
this._hasDataMap[itemName] =
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
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] : } } } this.clear(); this._buildShape(); },
2、于是可能产生了如下一个坐标系设置代码
name: 'iphone3',
type: 'map',
mapType: 'china',
selectedMode:'single',
roam: true,
showLegendSymbol:true,
itemStyle:{
label:{show:true}
,areaStyle:{color:'green'}
//设置地图背景色的颜色设置
,color:'rgba(255,0,255,0.8)' //刚才说的图例颜色设置
emphasis:{label:{show:true}}
{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) :
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:{
color:'rgba(255,0,255,0.8)'
mapType:'none',
name: 'iphone3',
type: 'map',
mapType: 'china',
selectedMode:'single',
roam: true,
showLegendSymbol:true,
itemStyle:{
label:{show:true}
,areaStyle:{color:'green'}
emphasis:{label:{show:true}}
{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 设置地图(map)值变化颜色(visualMap):visualMap: {
max: 50000,
点击打开链接(修改后的echarts.js)
meta charset= &utf-8&&
1、问题背景     设计一条折线图，但是图形中不用插件自带的颜色，需要自定义线条和折点的颜色2、实现源码（1）图形自分配颜色
echarts-设置折线图中折线线条颜色和折线点颜色
对于利用坐标系打散点的图形，有时需要给背景地图即geo上色，但是echart并没有提供直接的方法，本文以世界地图为例进行背景上色。
echarts 中国地图外边框投影 阴影立体效果，每一级地图都加上立体边框效果
这是左边传完参数之后右边正常加载的样子，嗯对看着一切都没有问题 ，然而下面就是见证奇迹的时刻
当我拖拽改变数值大小的时候，图列的颜色变的只有一种颜色的，这还不算太糟糕的bug，继续往...
最近有个挺好玩的需求：需要将分布在全国各地的系统用户数量统计出来，以地图的形式展示出每个地域的用户数量。
此前我一直用的是highcharts，无奈highcharts不支持地图报表，于是转向使用百度...
他的最新文章
讲师：何宇健
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)