#MBA 简介

MBA 是一个以 SVG 为输出媒介、以 D3.js 为渲染内核的图表库，主要面向 React/Next.js 场景。

它把同一套图表能力按渲染方式拆成三个入口：

入口	适用场景	交互/动画	运行环境
`mba/csr`	React 客户端图表组件	✅	Browser（`'use client'`）
`mba/ssr`	React Server Components / 纯 SSR 输出	❌（静态 SVG）	Server（或构建期）
`mba/dom`	非 React / 想用命令式 API	✅	Browser

#支持的图表（以入口导出为准）

图表	`csr`	`ssr`	`dom`
Bar	✅	✅	✅
Hours	✅	❌	✅
HBar	✅	✅	✅
MultiBar	✅	✅	✅
HMultiBar	✅	✅	✅
Line	✅	✅	✅
DateTrend	✅	❌	✅
Pie	✅	✅	✅
Radar	✅	✅	✅
Gauge	✅	✅	（未在 `mba/dom` 入口导出）
Histogram	✅	✅	（未在 `mba/dom` 入口导出）
Heat	✅	✅	（未在 `mba/dom` 入口导出）
Geo	✅	（未在 `mba/ssr` 入口导出）	✅

说明：仓库中存在一些未完成/实验性实现（例如 WordCloud）。文档只覆盖当前入口已导出的 API。

#30 秒上手（CSR）

TSX

'use client'

import { Bar } from 'mba/csr'

const data = [
  { name: 'A', value: 12 },
  { name: 'B', value: 28 },
  { name: 'C', value: 19 },
]

export default () => {
  return <Bar
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={data}
  />
}

#MBA 简介

#支持的图表（以入口导出为准）

#30 秒上手（CSR）

#下一步