#基础用法

MBA 的大多数图表都遵循同一套数据约定：用字段名描述维度，用 data 提供原始数组。

#数据结构

#单维（WithSingle）

适用图表：Bar / HBar / Pie / Gauge / Histogram（以及部分特殊图）。

TSX
import { Bar } from 'mba/csr'

const data = [
  { category: '产品 A', sales: 120 },
  { category: '产品 B', sales: 200 },
  { category: '产品 C', sales: 150 },
]

export default () => {
  return <Bar
    labelField="category"
    valueField="sales"
    valueLabel="销售额"
    data={data}
  />
}

#多维（WithMulti）

适用图表：Line / MultiBar / HMultiBar / Radar / Heat 等。

TSX
import { Line } from 'mba/csr'

const data = [
  { month: 'Jan', sales: 100, profit: 20 },
  { month: 'Feb', sales: 150, profit: 35 },
  { month: 'Mar', sales: 200, profit: 50 },
]

export default () => {
  return <Line
    labelField="month"
    valueField={['sales', 'profit']}
    valueLabel={['Sales', 'Profit']}
    data={data}
  />
}

valueLabel 是必填字段（即使你不显示 tooltip），用于内置提示与部分图例的显示文案。

#通用 Props（常用）

这些字段在多数图表中都可用（不同入口支持程度略有差异）：

字段说明
grid图表与容器的边距（{ top, right, bottom, left }）
isDark暗色模式（不传则使用全局 GLOBAL.DARK_MODE）
colors自定义配色（字符串/数组，或 { light, dark }）
fillStyle内置纹理：linear / hlinear / slash / grid / grain
valueFormat内置格式：number / usd / percent / size / chinese…或自定义函数
labelFormat对标签做格式化（(text, data, meta) => string）
sort排序（{ order, by }）或 false 禁用排序
maxCount限制最多显示的条目数量

CSR/DOM 额外支持：

字段说明
duration动画时长（false/<=0 关闭）
ease动画曲线（如 cubicOut / bounceOut）
onClick点击回调（SSR 不支持）
clickSelect点击后高亮选中（SSR 不支持）
tip自定义 tooltip（SSR 不支持）

#CSR：最常用（React Client）

CSR 图表内部使用 DOM 渲染，具备交互与动画能力。

TSX
'use client'

import { Pie } from 'mba/csr'

export default () => {
  return <Pie
    labelField="name"
    valueField="value"
    valueLabel="占比"
    data={[
      { name: 'A', value: 30 },
      { name: 'B', value: 70 },
    ]}
    type="ring"
    showCenter
  />
}

#SSR：静态 SVG（适合 RSC/构建期）

SSR 图表返回纯 <svg>，适合首屏静态渲染、导出图片、邮件模板等场景。

TSX
import { Bar } from 'mba/ssr'

export default () => {
  return <Bar
    width={640}
    height={320}
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[
      { name: 'A', value: 12 },
      { name: 'B', value: 28 },
    ]}
  />
}

SSR 模式不支持 tooltip / click；相关参数会被忽略或不会生效。

#DOM：命令式（非 React / 手动控制）

TypeScript
import { Bar } from 'mba/dom'

const chart = new Bar({
  selector: document.getElementById('chart')!,
  labelField: 'name',
  valueField: 'value',
  valueLabel: 'Value',
})

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

// 更新数据
chart.data([{ name: 'A', value: 12 }, { name: 'B', value: 28 }])

// 更新配置（不会改变 data）
chart.options({ maxCount: 10, duration: 300 })

// 导出 SVG 字符串
const svg = chart.toSVG()

#下一步