地图如何根据数值自定义区块颜色?
类似 vchart 这样的填充地图(https://visactor.io/vchart/demo/map-chart/basic-map),怎么能自定义区块颜色的规则?示例里的配置不太符合我的需求。我希望当值在某个区间,显示一个指定的颜色。
回复
1个回答

test
2024-06-27
解决方案 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 && item.range[1] >= +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 && item.range[1] >= +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
相关文档 Related Documentation
更多 demo:https://visactor.io/vchart/demo/map-chart/basic-map?keyword=map
地图教程:https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Map
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容