#基础示例

#Bar（CSR）

TSX

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

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

#Line（CSR）

TSX

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

export default () => {
  return <Line
    labelField="month"
    valueField={['sales', 'profit']}
    valueLabel={['Sales', 'Profit']}
    data={[
      { month: 'Jan', sales: 100, profit: 20 },
      { month: 'Feb', sales: 150, profit: 35 },
    ]}
    type="area"
    curve="monotone"
    legend={{ postion: 'auto', mode: 'simple' }}
  />
}

#Pie（SSR）

TSX

import { Pie } from 'mba/ssr'

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

#Bar（DOM）

TypeScript

import { Bar } from 'mba/dom'

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

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