网络编程 发布日期：2025/10/30 浏览次数：1
前言
本来想写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' "htmlcode">
{
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) "htmlcode">
{
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的时候顺序换一下就行了。举手之劳。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。