地图如何根据数值自定义区块颜色？-灵析社区

## 解决方案 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)  ## 相关文档 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)