bi引擎
npm install @jzliu-cli/bi-enginejzliu-cli BI 引擎 - 基于 Vue 2.x 的现代化 BI 仪表板解决方案
``bash使用 yarn 安装
yarn add @jzliu-cli/bi-engine
🚀 快速开始
$3
`bash
安装核心依赖
yarn add @jzliu-cli/bi-engine element-ui vue@^2.6.11 vuex@^3.6.2或使用 npm
npm install @jzliu-cli/bi-engine element-ui vue@^2.6.11 vuex@^3.6.2
`$3
main.js:
`javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vuex from 'vuex'// 必需:使用 Element UI
Vue.use(ElementUI)
// 必需:使用 Vuex
Vue.use(Vuex)
new Vue({
render: h => h(App),
}).$mount('#app')
`$3
最简单的使用方式:
`vue
`使用内置数据:
`vue
:widgets="widgets"
:layoutObj="layoutObj"
/>
`📚 API 文档
$3
#### BiDashboard
主仪表板组件,提供完整的仪表板设计器功能。
Props:
-
previewFlag (Boolean): 预览模式开关
- layoutObj (Object): 仪表板布局配置对象
- widgets (Array): 外部传入的图表组件数据
- enableTabSwitch (Boolean): 是否启用 tab 切换功能,默认 trueEvents:
-
@dashboard-updated: 仪表板更新时触发
- @chart-selected: 图表选中时触发
- @tab-change: 组件面板 tab 切换时触发,参数为 { tabKey, tabLabel }#### chartRender
图表渲染组件,用于渲染单个图表。
Props:
-
chartData (Object): 图表数据配置
- styleConfig (Object): 样式配置示例:
`javascript
:chartData="chartData"
:styleConfig="styleConfig"
@chart-click="handleChartClick"
/>
`#### cTabs
自定义标签页组件,提供美观的标签页切换功能。
Props:
-
tabList (Array): 标签页列表,格式:[{ key: 'tab1', label: '标签1' }, { key: 'tab2', label: '标签2' }]
- value (String|Number): 当前激活的标签页 keyEvents:
-
@input: 标签页切换时触发,参数为新的 tabKey
- @change: 标签页切换时触发,参数为新的 tabKey示例:
`javascript
:tabList="tabList"
v-model="activeTab"
@change="handleTabChange"
/>
`$3
提供丰富的工具函数集合:
`javascript
import { utils } from '@jzliu-cli/bi-engine'// 图表工具函数
utils.chartUtils.elResizeObverse(element, callback)
utils.chartUtils.getParamsRowsAndColumns(data)
// 数据处理工具函数
utils.dataUtils.calcDescartes(arrays)
utils.dataUtils.transferWhiteVal(value)
utils.dataUtils.mateMapping(data)
// 样式工具函数
utils.styleUtils.generateStyle(config)
// 验证工具函数
utils.validationUtils.validateChartData(data)
`$3
仪表板面板配置:
`javascript
import { panelConfig } from '@jzliu-cli/bi-engine'// 获取默认配置
const defaultConfig = panelConfig.getDefaultConfig()
// 获取图表类型配置
const chartTypes = panelConfig.getChartTypes()
// 获取样式配置
const styleConfig = panelConfig.getStyleConfig()
`$3
提供各种枚举数据:
`javascript
import { enumData } from '@jzliu-cli/bi-engine'// 聚合器映射
console.log(enumData.aggregatorMap)
// 表格类型映射
console.log(enumData.tableTypeZnMap)
// 图表系列颜色
console.log(enumData.chartSeriesColors)
// 线条类型映射
console.log(enumData.lineTypeMap)
`$3
用于开发和测试的模拟数据:
`javascript
import { mockData } from '@jzliu-cli/bi-engine'// 获取示例图表数据
const sampleChartData = mockData.getSampleChartData()
// 获取仪表板配置示例
const sampleDashboardConfig = mockData.getSampleDashboardConfig()
`$3
Vuex store 配置,用于状态管理:
`javascript
import { storeConfig } from '@jzliu-cli/bi-engine'
import Vuex from 'vuex'// 创建 store 实例
const store = new Vuex.Store(storeConfig)
// 在 Vue 应用中使用
new Vue({
store,
// ...
})
📊 图表类型支持
- 柱状图 (Column)
- 折线图 (Line)
- 饼图 (Pie)
- 表格 (Table)
- 指标卡 (IndicatorCard)
🔧 开发配置
$3
`bash
克隆项目
git clone 安装依赖
yarn install启动开发服务器
yarn build:watch构建生产版本
yarn build
`$3
`bash
在 biDashboard 目录中
yarn link在测试项目中
yarn link "@jzliu-cli/bi-engine"
`📋 依赖要求
$3
- Vue: ^2.6.11
- Element UI: ^2.15.10
- Vuex: ^3.6.2
- @antv/g2plot: ^2.4.13$3
- lodash: ^4.17.21
- vue-grid-layout: ^2.3.12
- vuedraggable: ^2.24.3🎯 使用示例
$3
`vue
:chartData="chartData"
:styleConfig="styleConfig"
/>
`$3
`vue
:config="dashboardConfig"
@dashboard-updated="handleDashboardUpdate"
@chart-selected="handleChartSelect"
/>
`🐛 问题排查
$3
1. 样式不生效
- 确保已导入 Element UI 样式
- 检查样式隔离前缀是否正确
2. 图表不显示
- 检查数据格式是否正确
- 确认字段映射配置
3. 组件未注册
- 确保已正确使用
Vue.use(BiDashboard)
- 检查组件名称拼写$3
`javascript
// 开启调试模式
Vue.use(BiDashboard, {
debug: true,
config: {
// 自定义配置
}
})
`📄 许可证
MIT License
🤝 贡献
欢迎提交 Issue 和 Pull Request!
🔄 第三方项目集成示例
$3
main.js 配置:
`javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vuex from 'vuex'// 使用 Element UI
Vue.use(ElementUI)
// 使用 Vuex (必需)
Vue.use(Vuex)
new Vue({
render: h => h(App),
}).$mount('#app')
`$3
编辑模式 - 支持拖拽设计:
`vue
:widgets="widgets"
:layoutObj="layoutObj"
@tab-change="handleTabChange"
/>
`预览模式 - 只读展示:
`vue
`$3
单个图表渲染:
`vue
`$3
根据 tab 切换动态加载数据:
`vue
:widgets="widgets"
:layoutObj="layoutObj"
@tab-change="handleTabChange"
/>
`$3
使用工具函数和配置:
`javascript
import bi, {
chartRender,
mockData,
enumData,
utils,
panelConfig
} from '@jzliu-cli/bi-engine'// 使用模拟数据
const sampleData = mockData.widgets
// 使用枚举数据
const chartTypes = enumData.chartTypeMap
// 使用工具函数
const processedData = utils.dataUtils.calcDescartes(data)
// 使用配置
const defaultConfig = panelConfig.getDefaultConfig()
`🎯 常见使用场景
$3
适用于需要拖拽设计仪表板的场景,用户可以:
- 从组件面板拖拽图表到画布
- 配置图表样式和数据
- 实时预览效果
- 保存和加载仪表板配置$3
适用于只读展示的场景,用户可以:
- 查看已设计的仪表板
- 交互式浏览图表
- 响应式适配不同屏幕$3
适用于只需要展示单个图表的场景:
- 在现有页面中嵌入图表
- 使用内置的图表类型
- 自定义图表样式$3
适用于需要根据用户操作动态加载数据的场景:
- 根据 tab 切换加载不同数据
- 实时更新图表内容
- 支持数据筛选和查询📋 数据格式说明
$3
`javascript
const widgets = [
{
type: 'Column', // 图表类型
name: '柱状图', // 图表名称
className: 'component-type-column', // CSS 类名
defaultImg: 'http://example.com/img.png', // 默认图片
measures: [ // 度量字段
{
unitCode: 'sales',
unitName: '销售额',
belongDimName: null
}
],
dimensions: [ // 维度字段
{
unitCode: 'category',
unitName: '类别',
belongDimName: '商品维度'
}
]
}
]
`$3
`javascript
const layoutObj = {
layout: [ // 布局配置
{
type: 'Column',
x: 0, y: 0, w: 6, h: 4, // 网格位置和大小
i: 'unique-id', // 唯一标识
// ... 其他图表配置
}
],
dashboardName: '仪表板名称'
}
``如有问题,请联系:
- 邮箱: support@jzliu-cli.com
- 文档: 在线文档
---