Preface
I originally wanted to write an echarts initialization function, but recently I wanted to write a mix of maps and bar charts, that is, there must be a bar chart on the map of each province. So I used the map carefully.
1. I won’t introduce some basic properties of the map, but those styles
2. There is no big difference between the acquisition of map data and the loading of Series. The map data is all in, you can view it yourself, or you can get the response data by yourself according to the format.
What I want to deal with here is the problem of how to set the legend color and the base map color.
1. The color code of the legend
refresh: function (newOption) {
if (newOption) {
= newOption || ;
= ();
= ;
var data = || [];
var itemName;
var something;
var color;
var queryTarget;
if () {
for (var k in ) {
this._selectedMap[k] = typeof this._selectedMap[k] != 'undefined' ? this._selectedMap[k] : [k];
}
}
for (var i = 0, dataLength = ; i < dataLength; i++) {
itemName = this._getName(data[i]);
if (itemName === '') {
continue;
}
something = this._getSomethingByName(itemName);
if (!) {
this._hasDataMap[itemName] = false;
} else {
this._hasDataMap[itemName] = true;
if ( && ( === ecConfig.CHART_TYPE_PIE || === ecConfig.CHART_TYPE_FORCE || === ecConfig.CHART_TYPE_FUNNEL)) {
queryTarget = [
,
];
} else {
queryTarget = [];
}//You can see the following sentence comment by danielinbiti. The legend color first looks for whether the series has set this property for judgment. If not, the value will be selected according to the default color setting. If set, choose the value according to the set color. Now if you want to set it, you must set the color in the corresponding coordinate system in the series.
color = ((queryTarget, ''), , , ); if (color && != ecConfig.CHART_TYPE_K) { (itemName, color); } this._selectedMap[itemName] = this._selectedMap[itemName] != null ? this._selectedMap[itemName] : true; } } } (); this._buildShape(); },
2. So the following coordinate system setting code may be generated
{
name: 'iphone3',
type: 'map',
mapType: 'china',
selectedMode:'single',
roam: true,
showLegendSymbol:true,
itemStyle:{
normal:{
label:{show:true}
,areaStyle:{color:'green'} //Set the color settings of the map background color ,color:'rgba(255,0,255,0.8)' //The legend color settings mentioned just now },
emphasis:{label:{show:true}}
},
data:[
{name: 'Beijing',value: (()*1000)},
{name: 'Tianjin',value: (()*1000)},
{name: 'Shanghai',value: (()*1000)}
]
}
3. Is there any problem with this setup? I set it up and found that there was a problem. The legend color is correct, but the background color of the map is wrong, and it becomes consistent with the color of the first color setting.
So I checked the map source code () and found that there was such a line of code
color = dataRange && !isNaN(value) ? (value) : null; = || color || ((queryTarget, ''), , -1, data)|| (queryTarget, '');
If the map is china, the style here can be understood as the map province, with no value. If the color range is pulled to the bottom, there is no value (you can see that the getColor method returns null), and then search, so both are set, and the areaStyle setting cannot be found. The background color is the color of the first coordinate system.
4. Then think about how to solve it.
Looking at the color setting mechanism of the legend, it actually has nothing to do with the graphics and types of the coordinate system, as long as it is the format of the coordinate system. Can that be deceived?
In series, set as
{
name: 'iphone3',//add by danielinbiti, note that the name here must be consistent with the name of the coordinate system type:'', //Set to '', all graphics will not be read 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: 'Beijing',value: (()*1000)},
{name: 'Tianjin',value: (()*1000)},
{name: 'Shanghai',value: (()*1000)}
]
}
Summarize:
Maybe no other invisible settings were found, but according to the code in the map, there seems to be no other way. Hope echarts can fix this problem. Just change the order of or. A simple task.
Okay, the above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.