foreword
Recently, I received an outsourcing project. One of the requirements is this. It is
necessary to display a statistical map of China. Each province and urban area is required to be a different color, which must be specially distinguished. And the hidden part of the South China Sea.
After reading the Echats related documents, I found that there is a similar demo, but it does not meet the requirements. So read the documentation carefully. Found a solution to the problem and shared it.
text
Not much nonsense, go directly to the code
Method 1 (Add styles directly in the data)
The data data structure that requires background cooperation is as follows:
data: {
{name: '北京',value: 11,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '天津',value: 22,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '上海',value: 33,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '重庆',value: 44,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '河北',value: 55,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '河南',value: 66,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '云南',value: 77,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '辽宁',value: 88,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '湖南',value: 99,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}},
{name: '南海诸岛',value: 99,itemStyle:{normal:{opacity:0,label:{show:false}}}},
..........
}
// areaColor 就是省的自定义颜色值
// opacity 就是某个省透明,一般有业务需求要求隐藏南海诸岛(虽然业务有要求,但是一定要记住南海永远是中国的一部分,南海永远是中国的一部分,南海永远是中国的一部分,重要的事情说三遍!)
Front-end configuration information
option = {
....... 省略大堆配置
series: [{
type: 'map',
name: 'tips名字',
data: data
}]
}
Method 2 (Add style in configuration, define color in data)
The data data structure that requires background cooperation is as follows:
data: {
{"name": "北京", "value": 34, "count": 500, "color": "#f00"},
{"name": "天津", "value": 33, "count": 300, "color": "#ff0"},
{"name": "上海", "value": 32, "count": 50, "color": "#f0f"},
{"name": "重庆", "value": 31, "count": 50, "color": "#0f0"},
{"name": "河北", "value": 30, "count": 120, "color": "#00f"},
........
}
Front-end configuration information
// data需要进行一次循环,填入设置。
var customSettings = [];
data.forEach(function (item, index) {
customSettings.push({
name: item.name,
itemStyle: {
areaColor: item.color,
color: item.color
}
})
})
// 南海单独设置,push 进数组
customSettings.push(
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}
)
option = {
....... 省略大堆配置
geo: {
map: 'china',
top: 0,
bottom: 0,
regions: customSettings // 设置单独的样式。
}
series: [{
type: 'map',
name: 'tips名字',
data: data
}]
}
Summarize
These are the two solutions I have found so far, each with its own advantages and disadvantages. The first one requires background support and returns the data you need, but the returned data carries a lot of data. However, you can also return to the previous section to assemble the data by yourself. A looping method similar to the second method can be used.