Echarts legend color and map background color, echarts legend background color

Echarts legend color and map background color, echarts legend background color

I originally wanted to write the echarts initialization function, but recently I want to write a mixed map and column chart, that is, a bar chart is displayed on the map of each province. So I carefully used the map.

1. Some basic attributes of the map will not be introduced, or those styles.

2. There is no big difference between map data acquisition and Series loading. Map data is stored in map. js. You can view the data by yourself or obtain the response data by yourself.

Here, we mainly want to solve the problem of how to set the legend color and the basemap color.

1. color code of the legend

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];} // you can see the following commend by danielinbiti, legend Color first, check whether the itemStyle. normal. color attribute is set for series. If it does not exist, the default color is used to set the value. If this parameter is set, use the set color. You must set the color in the coordinate system of 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. The code for setting the next coordinate system 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 of the map background color, color: 'rgba (255, 0.8) '// The Legend color settings}, emphasis: {label: {show: true }}, data: [{name: 'beijing', value: Math. round (Math. random () * 1000)}, {name: 'tianjin ', value: Math. round (Math. random () * 1000)}, {name: 'shanghai', value: Math. round (Math. random () * 1000)}]}

3. Is there a problem with this setting? I set it and found a problem. The color of the legend is correct, but the background color of the map is incorrect. The color of the coordinate system is the same as that of the first color.

So I checked the map source code (map. js) and found such a line of code.

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');

If the map is china, the style here can be understood as the map province, style. color has no value. If the range is pulled to the bottom, there is no value (we can see that the return value of the getColor method is null). Then we can find itemStyle. normal. color, so both are set. The areaStyle setting cannot be found. The background color is the color of the first coordinate system.

4. Try again.

Looking at the color setting mechanism of the legend, it actually has nothing to do with what graphics and types of the coordinate system, as long as it is the format of the coordinate system. Can it be spoofed.

In series, set to this

{Name: 'iphone3', // add by danielinbiti. Note that the name must be consistent with the coordinate system name. type: '', // set it '', none of the images read itemStyle: {normal: {color: 'rgba (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: Math. round (Math. random () * 1000)}, {name: 'tianjin ', value: Math. round (Math. random () * 1000)}, {name: 'shanghai', value: Math. round (Math. random () * 1000)}]}

Summary:

Maybe no other invisible settings are found, but there seems to be no other way according to the code in map. We hope echarts can fix this problem. Just change the order of or. Give up your hand.