#安装

#安装依赖

MBA 依赖 D3 v7。

Bash
pnpm add mba d3
# npm i mba d3
# yarn add mba d3

#引入样式（必做）

MBA 的样式分成两份：

  • 基础样式：mba/styles/css/mba.css（或 mba.min.css）
  • Tooltip：mba/styles/css/tooltip.css（或 tooltip.min.css，仅 CSR/DOM 需要）

#Next.js（App Router）推荐

在全局样式文件（例如 app/global.css）中：

CSS
@import 'mba/styles/css/mba.css';
@import 'mba/styles/css/tooltip.css';

#直接在 JS/TS 中引入

TypeScript
import 'mba/styles/css/mba.css'
import 'mba/styles/css/tooltip.css'

#选择入口（CSR / SSR / DOM）

#CSR：mba/csr

  • React 客户端图表组件（内部带 'use client'）
  • 支持 tooltip / click / 动画
TSX
'use client'
import { Bar } from 'mba/csr'

#SSR：mba/ssr

  • 输出静态 <svg>（适合 RSC/构建期）
  • 不支持 tooltip / click（即使传参也不会生效）
TSX
import { Bar } from 'mba/ssr'

#DOM：mba/dom

  • 命令式 API（非 React 或你想手动控制生命周期）
  • 必须传 selector（HTMLElement 或 CSS selector）
TypeScript
import { Bar } from 'mba/dom'

const chart = new Bar({
  selector: '#chart',
  labelField: 'name',
  valueField: 'value',
  valueLabel: 'Value',
})

chart.data([
  { name: 'A', value: 12 },
  { name: 'B', value: 28 },
])

#Next.js 常见注意点

  • 使用 CSR 图表的文件一般需要 'use client'（你需要 useEffect、事件、ref 时尤其如此）。
  • SSR 图表适合首屏静态展示；需要交互时，建议用 CSR 替换/增强。

#下一步