地图如何根据数值自定义区块颜色?

作者站长头像
站长
· 阅读数 11

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

回复
1个回答
avatar
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

answer image

相关文档 Related Documentation

更多 demo:https://visactor.io/vchart/demo/map-chart/basic-map?keyword=map

地图教程:https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Map

相关api:https://visactor.io/vchart/option/mapChart#area.style

github:https://github.com/VisActor/VChart

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