ba-a2ui

A→UI 纯可视化平台 — 通用元数据渲染器。接收标准化元数据，立即渲染为看板。

安装

npm install ba-a2ui

peer 依赖：

npm install vue@^3.4.0 echarts@^5.6.0 lodash-es@^4.18.0

使用

import { render } from 'ba-a2ui';

// 调用即渲染到 DOM
const widget = await render(
  document.getElementById('app'),
  [
    {
      metaId: 'card-1',
      componentType: 'card',
      dataSource: { sourceType: 'Virtual', sourceId: '' },
      styleConfig: { color: '#3B82F6' },
      extendField: { title: '营业收入', value: '5.3亿', trend: 'up' }
    },
    {
      metaId: 'chart-1',
      componentType: 'lineChart',
      dataSource: { sourceType: 'Virtual', sourceId: '' },
      styleConfig: {},
      extendField: {
        title: '营收趋势',
        staticData: {
          categories: ['1月','2月','3月'],
          series: [{ name: '实际营收', data: [2.8, 3.2, 3.8] }]
        }
      }
    }
  ]
);

// 更新数据（自动重渲染）
widget.updateData(newMetadata);

// 卸载看板
widget.unmount();

API

render(container, metadata)

| 参数 | 类型 | 说明 | |------|------|------| | container | HTMLElement | 必填。宿主 DOM 容器，看板直接挂载到此元素内 | | metadata | BaseMetadata[] | 必填。通用可视化元数据数组，描述组件类型、数据、样式 |

调用后立即在 container 内渲染看板，返回 RenderWidget 用于后续控制。

RenderWidget

| 方法 | 说明 | |------|------| | updateData(data) | 更新数据，看板自动重新渲染 | | unmount() | 卸载看板，销毁 Vue 实例，释放资源 |

支持的组件类型

| componentType | 渲染为 | |---------------|--------| | card | 指标卡（title/value/trend/change/color） | | lineChart | 折线图 | | barChart | 柱状图 | | pieChart | 饼图 | | tileList | 磁贴列表（list/grid/numbered/inline） | | table | 数据表格 | | mapChart / scatterChart / gaugeChart / radarChart | 相应图表 |

布局

引擎根据组件类型组合自动匹配模版：

• card + chart → standard（顶部 cards 网格 + 2:1 分栏）
• 只有 card → 均匀网格
• 只有 chart → 全宽堆叠
• card + tileList → cards 网格 + tiles 全宽
• 只有 tile/table → 全宽内容

静态数据格式

extendField.staticData 接收各组件类型的标准静态数据格式：

// 图表
{ categories: string[], series: [{ name: string, data: number[] }] }

// 指标卡
{ title: string, value: string|number, trend: 'up'|'down'|'warning'|'neutral' }

// 磁贴列表
{ title?: string, layout: 'list'|'grid'|'numbered'|'inline', items: [{ text: string, color?: string }] }

// 表格
{ columns: string[], rows: string[][] }