Preview Updated 2026-05-10

ChoroplethMap 分级填色

按数据值给 GeoJSON 区域填色，内置 sequential / diverging 色阶，含 hover tooltip 和图例。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

data 行通过 idField 与 feature properties[idField] 匹配。domain 不传时自动取 min / max；colorScale 接受 'sequential' | 'diverging' 或自定义 (value, domain) => color 函数。

背景视口

380 万1480 万

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfChoroplethMap } from '@chufix-design/maps-vue';
import { sampleGeoChina } from '../_shared/sample-geo';

const data = [
  { id: 'huabei', name: '华北', value: 820 },
  { id: 'huadong', name: '华东', value: 1480 },
  { id: 'huanan', name: '华南', value: 1120 },
  { id: 'xibu', name: '西部', value: 540 },
  { id: 'dongbei', name: '东北', value: 380 },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 110, lat: 33 }"
    :zoom="3"
    :width="720"
    :height="520"
  >
    <CfChoroplethMap
      :geojson="sampleGeoChina"
      :data="data"
      idField="id"
      nameField="name"
      colorScale="sequential"
      unit=" 万"
    />
  </CfMapTile>
</template>

<script setup>
import { CfMapTile, CfChoroplethMap } from '@chufix-design/maps-vue';
import { sampleGeoChina } from '../_shared/sample-geo';

const data = [
  { id: 'huabei', name: '华北', value: 820 },
  { id: 'huadong', name: '华东', value: 1480 },
  { id: 'huanan', name: '华南', value: 1120 },
  { id: 'xibu', name: '西部', value: 540 },
  { id: 'dongbei', name: '东北', value: 380 },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 110, lat: 33 }"
    :zoom="3"
    :width="720"
    :height="520"
  >
    <CfChoroplethMap
      :geojson="sampleGeoChina"
      :data="data"
      idField="id"
      nameField="name"
      colorScale="sequential"
      unit=" 万"
    />
  </CfMapTile>
</template>

import { CfChoroplethMap, CfMapTile } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfChoroplethMap } from '@chufix-design/maps-vue';
  import { sampleGeoChina } from '../_shared/sample-geo';

  const data = [
    { id: 'huabei', name: '华北', value: 820 },
    { id: 'huadong', name: '华东', value: 1480 },
    { id: 'huanan', name: '华南', value: 1120 },
    { id: 'xibu', name: '西部', value: 540 },
    { id: 'dongbei', name: '东北', value: 380 },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 110, lat: 33 }} zoom={3} width={720} height={520} >
          <CfChoroplethMap geojson={sampleGeoChina} data={data} idField="id" nameField="name" colorScale="sequential" unit=" 万" />
        </CfMapTile>
    </>
  );
}

import { CfChoroplethMap, CfMapTile } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfChoroplethMap } from '@chufix-design/maps-vue';
  import { sampleGeoChina } from '../_shared/sample-geo';

  const data = [
    { id: 'huabei', name: '华北', value: 820 },
    { id: 'huadong', name: '华东', value: 1480 },
    { id: 'huanan', name: '华南', value: 1120 },
    { id: 'xibu', name: '西部', value: 540 },
    { id: 'dongbei', name: '东北', value: 380 },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 110, lat: 33 }} zoom={3} width={720} height={520} >
          <CfChoroplethMap geojson={sampleGeoChina} data={data} idField="id" nameField="name" colorScale="sequential" unit=" 万" />
        </CfMapTile>
    </>
  );
}

API

属性	类型	默认	说明
`geojson`	`FeatureCollection`	—	区域 GeoJSON
`data`	`{ id, value, name? }[]`	—	数据行
`idField`	`string`	`'id'`	feature 中匹配 id 的属性名
`nameField`	`string`	`'name'`	feature 中作为名称回退的属性名
`domain`	`[min, max]`	自动	色阶值域
`colorScale`	`'sequential' \| 'diverging' \| (v, domain) => string`	`'sequential'`	色阶
`extent`	`MapBounds`	自动 fit	投影范围
`width` / `height`	`number`	`480` / `280`	SVG 尺寸
`tooltip`	`boolean`	`true`	hover 显示 tooltip
`legend`	`boolean`	`true`	显示底部图例
`unit`	`string`	—	值后缀（图例 / tooltip）