Preface
Recently, I took on an outsourcing project, and one of the requirements is like this,
It is necessary to display a statistical map of China. Each province and city is required to have different colors, which must be distinguished. And hide the South China Sea.
After reading the relevant documents of Echats, we found that there was a similar demo, but it didn't particularly meet the requirements. So I read the documents carefully. Find a solution and share it.
text
There's not much bullshit, just code it
Method 1 (add styles directly to the data)
The data structure to be matched by the background is as follows:
data: {
{name: 'Beijing',value: 11,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Tianjin',value: 22,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Shanghai',value: 33,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Chongqing',value: 44,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Hebei',value: 55,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Henan',value: 66,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Yunnan',value: 77,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Liaoning',value: 88,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'Hunan',value: 99,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: 'South China Sea Islands',value: 99,itemStyle:{normal:{opacity:0,label:{show:false}}}},
..........
}
// areaColor is the custom color value of province
// opacity is the transparency of a province. Generally, there are business requirements to hide the islands in the South China Sea (although there are business requirements, it must be remembered that the South China Sea is always a part of China, the South China Sea is always a part of China, and the South China Sea is always a part of China. Important things should be said three times!)Front end configuration information
option = {
....... Omit bulk configuration
series: [{
type: 'map',
name: 'tips Name',
data: data
}]
}Method 2 (add style in configuration, define color in data)
The data structure to be matched by the background is as follows:
data: {
{"name": "Beijing", "value": 34, "count": 500, "color": "#f00"},
{"name": "Tianjin", "value": 33, "count": 300, "color": "#ff0"},
{"name": "Shanghai", "value": 32, "count": 50, "color": "#f0f"},
{"name": "Chongqing", "value": 31, "count": 50, "color": "#0f0"},
{"name": "Hebei", "value": 30, "count": 120, "color": "#00f"},
........
}Front end configuration information
// data needs to go through a cycle and fill in the settings.
var customSettings = [];
data.forEach(function (item, index) {
customSettings.push({
name: item.name,
itemStyle: {
areaColor: item.color,
color: item.color
}
})
})
// South China Sea set separately, push into array
customSettings.push(
{
name: 'South China Sea Islands',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}
)
option = {
....... Omit bulk configuration
geo: {
map: 'china',
top: 0,
bottom: 0,
regions: customSettings // Set a separate style.
}
series: [{
type: 'map',
name: 'tips Name',
data: data
}]
}summary
This is the two schemes I have found at present. They have their own advantages and disadvantages. The first one needs background support to return the data you need, but the returned data carries a lot of data. However, you can also return to the previous segment to cycle through the assembly data. It's the same cycle as the second one.