地图如何根据数值自定义区块颜色？-灵析社区
拽嘻嘻类似 vchart 这样的填充地图（[https://visactor.io/vchart/demo/map-chart/basic-map](https://link.segmentfault.com/?enc=gcwsh5sBtyGET%2FE7ShJE6A%3D%3D.SeJQcm8XNlyile%2BY5ypZTvgvCptSRaEB%2FURwuv2cy4NrPHTCfCin%2FJm6J%2BkTTotj7CqyV38TEP48%2Fgu%2F9YbqGg%3D%3D)），怎么能自定义区块颜色的规则？示例里的配置不太符合我的需求。我希望当值在某个区间，显示一个指定的颜色。
刘传疯子解决方案 Solution
在 VChart 中，可以通过地图图元样式配置中，填充色（"fill"）的回调函数来实现你的需求，类似：
const colorGroup = [
{
range: [1, 100],
color: 'rgb(252,250,97)'
},
{
range: [101, 200],
color: 'rgb(252,150,134)'
},
{
range: [201, 300],
color: 'rgb(87,33,15)'
}
];
area:{
style: {
fill: (datum) => {
const res = colorGroup.find(item => item.range[0] = +datum.value);
return res ? res.color : 'WhiteSmoke';
}
}
}
代码示例 Code Example
const spec = {
type: 'map',
data: [
{
values: [
{
name: 'Alabama',
value: 0
},
{
name: 'Alaska',
value: 140
},
{
name: 'Arizona',
value: 39
},
{
name: 'Arkansas',
value: 62
},
{
name: 'California',
value: 235
},
{
name: 'Colorado',
value: 49
},
{
name: 'Connecticut',
value: 137
},
{
name: 'Delaware',
value: 149
},
{
name: 'District of Columbia',
value: 285
},
{
name: 'Florida',
value: 198
},
{
name: 'Georgia',
value: 53
},
{
name: 'Hawaii',
value: 41
},
{
name: 'Idaho',
value: 82
},
{
name: 'Illinois',
value: 240
},
{
name: 'Indiana',
value: 273
},
{
name: 'Iowa',
value: 101
},
{
name: 'Kansas',
value: 215
},
{
name: 'Kentucky',
value: 41
},
{
name: 'Louisiana',
value: 37
},
{
name: 'Maine',
value: 107
},
{
name: 'Maryland',
value: 62
},
{
name: 'Massachusetts',
value: 61
},
{
name: 'Michigan',
value: 134
},
{
name: 'Minnesota',
value: 241
},
{
name: 'Mississippi',
value: 259
},
{
name: 'Missouri',
value: 144
},
{
name: 'Montana',
value: 92
},
{
name: 'Nebraska',
value: 117
},
{
name: 'Nevada',
value: 24
},
{
name: 'New Hampshire',
value: 106
},
{
name: 'New Jersey',
value: 147
},
{
name: 'New Mexico',
value: 77
},
{
name: 'New York',
value: 47
},
{
name: 'North Carolina',
value: 260
},
{
name: 'North Dakota',
value: 223
},
{
name: 'Ohio',
value: 283
},
{
name: 'Oklahoma',
value: 85
},
{
name: 'Oregon',
value: 31
},
{
name: 'Pennsylvania',
value: 65
},
{
name: 'Rhode Island',
value: 68
},
{
name: 'South Carolina',
value: 216
},
{
name: 'South Dakota',
value: 12
},
{
name: 'Tennessee',
value: 128
},
{
name: 'Texas',
value: 198
},
{
name: 'Utah',
value: 93
},
{
name: 'Vermont',
value: 66
},
{
name: 'Virginia',
value: 167
},
{
name: 'Washington',
value: 47
},
{
name: 'West Virginia',
value: 170
},
{
name: 'Wisconsin',
value: 20
},
{
name: 'Wyoming',
value: 203
}
]
}
],
area: {
style: {
fill: datum => {
const res = colorGroup.find(item => item.range[0] = +datum.value);
return res ? res.color : 'WhiteSmoke';
}
}
},
nameField: 'name',
valueField: 'value',
nameProperty: 'name',
map: 'usa',
region: [
{
roam: true,
projection: {
type: 'albersUsa'
}
}
]
};
结果展示 Results
在线效果参考："https://codesandbox.io/s/map-chart-custom-fill-n2fvsv" (https://link.segmentfault.com/?enc=KLQfMLuG97Q%2BbKuZ90Cq1A%3D%3D.Nnum7dYym%2FiVibEta4dBcKu6b3zK4Fi%2FXlvrGe9A8WR67IG9T9qS8B76uzYOp2uqFrqWpc0ZyzLGJL%2F9wqKvtg%3D%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250110/e2d97d4ca167cf35c26294b1a4cfd457.png)
相关文档 Related Documentation
更多 demo："https://visactor.io/vchart/demo/map-chart/basic-map?keyword=map" (https://link.segmentfault.com/?enc=llAGShwKxDMr6tycRdZe9g%3D%3D.vSETlbSBSmOpN0cWarzhXL4bkGMmXAEq586zwk13V3TdI%2BeYnoUneiX1N2R5QPxPKdmUvYrctWSnwl82JfFoSA%3D%3D)
地图教程："https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Map" (https://link.segmentfault.com/?enc=Elj4CfW%2BitLRCrn62ejVGQ%3D%3D.nc46YFyN%2BlBKBGqYMc4kBkM9%2BHgxrzDRu2cFhsGvmS0NP93G4wN4qsl34OCFz3Yb0tYEERA03DQSdNjC9D58UA%3D%3D)
相关api："https://visactor.io/vchart/option/mapChart#area.style" (https://link.segmentfault.com/?enc=U3PdyuUd7MnhsmkrBY%2FxuQ%3D%3D.q7Z%2BFhTJYooweOx6PPHky%2FMo28heMhi6CNssrNddw4azEu2jVA8iI9m4fC8M7fTgPELs5JQkLo56x%2FWk51j%2Biw%3D%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=vCd1LsazZpOcDpBYSsVQNw%3D%3D.agIMA6wEx9fyocRi%2F5qSvlxMeYOKwQE7RR6OZE2pMUg7la2uHvwT2%2BhpcSXdFap%2F)