lambo-design-bi-mobile

Vue2 + Vant2 移动端 BI 数据可视化组件库。通过配置化方式即可快速搭建手机端数据看板。

功能一览

• 30+ 图表：折线、柱状（多系列/堆叠）、饼环、漏斗、仪表盘、瀑布、子弹图、气泡图、象限气泡图、桑基图、进度条等，基于 ECharts 5，支持悬浮提示、图例滚动、负值自动定轴。
• 数据表格：基于 ag-grid 的分页表格与明细表格，支持汇总行、排序、固定表头、行点击联动与下钻；指标排名带金/银/铜角标样式。
• 指标卡：数值翻牌动画、同比环比标记、tab 切换、点击下钻。
• 容器与布局：卡片容器（普通 / 页签 / 分组页签）、24 栅格行列布局。
• 智能简报：公告列表 + Word 文档在线预览（预览内核按需加载）。
• 搜索筛选区：输入、模糊搜索、单选/多选、帮助框、日期系列等多种筛选形态，折叠/展开、必填校验，筛选条件驱动整页刷新。
• 组件联动与下钻：指标卡、表格、图表之间通过事件总线互相传参；支持跳转下钻详情页。
• 完整页面模板：内置首页与下钻详情页（顶部导航、搜索区、滚动容器、空态/加载骨架），路由带上 pageId 即可用。
• 离线演示模式：内置 mock 数据，无服务端也能跑通全部组件。
• 真实按需加载：没用到的图表不加载 ECharts、没用到的表格不加载 ag-grid、不预览文档不加载 Word 内核；支持 tree-shaking，无需 babel-plugin-import。
• 编译产物开箱即用：ESM + UMD + CSS + TypeScript 声明，宿主工程无需配置 vue-loader / less-loader。

安装

npm i lambo-design-bi-mobile

同时需要在业务工程中安装以下 peer 依赖：

npm i vue@^2.7 vue-router@^3.6.5 vant@^2.13 axios@^1.6 echarts@^5.6 [email protected] [email protected]

• ag-grid 两个包版本必须严格一致（Vue2 包装器最高只发布到 31.3.4）。
• vue-router 需 3.6.5 及以上。
• 需要 Word 在线预览时，再安装可选依赖 @js-preview/docx；不用则无需安装。

快速使用

1. 全局注册

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import LamboBiMobile from 'lambo-design-bi-mobile'
import 'lambo-design-bi-mobile/style.css' // 组件样式，全局引入一次即可

Vue.use(Vant)
Vue.use(LamboBiMobile, {
  config: {
    dataServerContext: '/api', // 接口前缀，按实际环境填写
    useMock: false             // 改为 true 走内置 mock，离线演示
  }
})

2. 直接使用整个看板页面（最常用）

<template>
  <BiIndexPageTm />
</template>

<script>
import { BiIndexPageTm } from 'lambo-design-bi-mobile'
export default { components: { BiIndexPageTm } }
</script>

访问路由时带上页面标识，例如 /bi?pageId=1001，组件会自动加载该页面的配置与数据并渲染全部内容，包括搜索区、卡片、图表、表格与下钻跳转。下钻详情页使用 BiChildPageTm，用法相同。

3. 单独嵌入某个组件

每个组件也可以独立使用，传入组件配置对象与查询参数即可：

<template>
  <AtomWidget :widget="widgetConfig" :params="queryParams" />
</template>

<script>
import { AtomWidget } from 'lambo-design-bi-mobile'
export default {
  components: { AtomWidget },
  data() {
    return {
      widgetConfig: {}, // 组件配置对象
      queryParams: {}   // 当前筛选条件
    }
  }
}
</script>

4. 按需引入

import {
  BiCharts,        // 图表
  BiPagingTable,   // 分页表格
  BiNumIndex,      // 指标卡
  BiBulletin,      // 智能简报
  BiSearchForm,    // 搜索筛选区
  EventBus,        // 组件联动事件总线
  EVENT_TYPES      // 联动事件类型
} from 'lambo-design-bi-mobile'

未引入的模块及其重型依赖不会进入业务打包产物。

主要组件

| 组件 | 功能 | | --- | --- | | BiIndexPageTm / BiChildPageTm | 看板首页 / 下钻详情页模板 | | AtomWidget | 按配置渲染任意单个组件 | | BiCharts | 30+ 种 ECharts 图表 | | BiPagingTable / BiDetailTable | 分页表格 / 明细表格 | | BiNumIndex | 数值指标卡（翻牌动画、下钻） | | BiTextGroup | 文字组 | | BiBulletin | 智能简报与 Word 预览 | | BiSearchForm / BiSearchItem | 搜索筛选区与筛选项 | | BiContainerCard | 卡片容器（含页签形态） | | LmJsPreviewDocx | Word 在线预览（需可选依赖） |

此外提供 EventBus / EVENT_TYPES 处理组件间联动、pageDrill 处理路由下钻、biConfig 做全局配置（接口前缀、mock 开关等）。

样式适配

组件样式按 375 设计稿输出 px，不绑定具体适配方案，由宿主工程统一处理：

• vw 方案：对本包 CSS 开启 postcss-px-to-viewport（viewportWidth: 375）；
• cqw 方案：使用 postcss-px-to-viewport-8-plugin，并在祖先容器上声明 container-type: inline-size；
• 不转换：组件在不小于 375px 的容器中按固定尺寸等比呈现。

License

ISC