#图表组件

本页聚焦于“每个图表独有的部分”。通用字段（labelField/valueField/valueLabel/data/grid/isDark/colors/valueFormat...）见 基础用法。

#Bar

• 入口：mba/csr / mba/ssr / mba/dom
• type（内置）：bar / radius / border / papaw / mountain / arrow（也支持自定义字符串）
• 其他常用：itemWidth、topValue

'use client'
import { Bar } from 'mba/csr'

export default () => {
  return <Bar
    type="radius"
    topValue
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[{ name: 'A', value: 12 }]}
  />
}

#Hours

• 入口：mba/csr / mba/dom
• Props 与 Bar 基本一致（属于 Bar 的一个变体实现）

#HBar

• 入口：mba/csr / mba/ssr / mba/dom
• type（内置）：bar / rank / hole / simple / mini
• 常用：labelWidth、valueWidth、separate、list

#MultiBar

• 入口：mba/csr / mba/ssr / mba/dom
• type（内置）：bar / radius / border
• 常用：itemWidth、stack、legend

#HMultiBar

• 入口：mba/csr / mba/ssr / mba/dom
• type（内置）：bar / rank

#Line

• 入口：mba/csr / mba/ssr / mba/dom
• type（内置）：line / area / ribbon / thick
• curve：linear / step / step-before / step-after / monotone / bump / catmull
• symbol：见 mba/type 的 GraphSymbol（如 circle / diamond / star…）

#DateTrend

• 入口：mba/csr / mba/dom
• 在 Line 基础上增加：start / end / frequency / dateFormat

#Pie

• 入口：mba/csr / mba/ssr / mba/dom
• type（内置）：ring / pie / solid / broken / rose / loop
• 常用：showCenter（pie 类型不支持）、startAt

#Radar

• 入口：mba/csr / mba/ssr / mba/dom
• type：area（默认） / bar
• shape：polygon（默认） / circle / ellipse
• 常用：level、startAt、maxValues、symbol

#Gauge

• 入口：mba/csr / mba/ssr
• type（内置）：indicator / bend / flask / ruler
• 必填：value
• 常用：min / max / angle

#Histogram

• 入口：mba/csr / mba/ssr
• type：bar / radius
• labelDateFormat：把 labelField 视为日期（true/格式字符串）
• agg：single / sum / count / percent / percent-count
• threshold：sturges / scott / freedman-diaconis

#Heat

• 入口：mba/csr / mba/ssr
• type：rect / dot / tick
• 常用：turn（交换轴）、hideZero、channel

Heat 的原始数据通常是“行/列/值”三元组：

'use client'
import { Heat } from 'mba/csr'

const data = [
  { source: 'A', target: 'B', count: 1 },
  { source: 'B', target: 'A', count: 2 },
]

export default () => {
  return <Heat
    labelField="source"
    valueField={['count']}
    valueLabel={['Count']}
    data={data}
    // 具体行/列字段由图表内部转换；如需“交叉热力图”可参考源码中的 CrossHeatGraph 类型
  />
}

#Geo

• 入口：mba/csr / mba/dom
• 核心：json（TopoJSON/GeoJSON 对象，或 URL/编码字符串）
• 常用：projection、rotation、zoom、border、channel

'use client'
import { Geo } from 'mba/csr'

export default () => {
  return <Geo
    json="china"
    // 可按你的数据字段重定义 name/code/center
    properties={{ nameField: 'name', codeField: 'adcode', centerField: 'center' }}
    labelTranslate={(name) => name.replace(/省|市|自治区/g, '')}
    zoom
  />
}

Geo 的 json="china" 等写法需要你在静态资源中提供对应 topo 文件，或通过 globalSetting({ GEO_PATH_URL }) 改写路径生成逻辑（见 全局配置）。