@jzliu-cli/bi-engine 0.0.1

package/README.md

@@ -0,0 +1,381 @@
+# @jzliu-cli/bi-engine
+
+jzliu-cli BI 引擎 - 基于 Vue 2.x 的现代化 BI 仪表板解决方案
+
+## 📦 安装
+
+```bash
+# 使用 yarn 安装
+yarn add @jzliu-cli/bi-engine
+
+# 或使用 npm 安装
+npm install @jzliu-cli/bi-engine
+```
+
+## 🚀 快速开始
+
+### 基础使用
+
+```javascript
+import Vue from 'vue'
+import BiDashboard, { chartRender } from '@jzliu-cli/bi-engine'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+// 使用 Element UI
+Vue.use(ElementUI)
+
+// 使用 BiDashboard
+Vue.use(BiDashboard)
+
+// 在组件中使用
+export default {
+  components: {
+    chartRender
+  },
+  data() {
+    return {
+      chartData: {
+        type: 'Column',
+        name: '柱状图',
+        // ... 其他配置
+      }
+    }
+  }
+}
+```
+
+### 完整仪表板使用
+
+```javascript
+import Vue from 'vue'
+import BiDashboard from '@jzliu-cli/bi-engine'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI)
+Vue.use(BiDashboard)
+
+// 在模板中使用
+<template>
+  <div>
+    <bi-dashboard :config="dashboardConfig" />
+  </div>
+</template>
+```
+
+## 📚 API 文档
+
+### 主要组件
+
+#### BiDashboard
+主仪表板组件，提供完整的仪表板设计器功能。
+
+**Props:**
+- `config` (Object): 仪表板配置对象
+- `previewMode` (Boolean): 预览模式开关
+
+**Events:**
+- `@dashboard-updated`: 仪表板更新时触发
+- `@chart-selected`: 图表选中时触发
+
+#### chartRender
+图表渲染组件，用于渲染单个图表。
+
+**Props:**
+- `chartData` (Object): 图表数据配置
+- `styleConfig` (Object): 样式配置
+
+**示例:**
+```javascript
+<chart-render 
+  :chartData="chartData" 
+  :styleConfig="styleConfig"
+  @chart-click="handleChartClick"
+/>
+```
+
+### 工具函数 (utils)
+
+提供丰富的工具函数集合：
+
+```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)
+```
+
+### 配置对象 (panelConfig)
+
+仪表板面板配置：
+
+```javascript
+import { panelConfig } from '@jzliu-cli/bi-engine'
+
+// 获取默认配置
+const defaultConfig = panelConfig.getDefaultConfig()
+
+// 获取图表类型配置
+const chartTypes = panelConfig.getChartTypes()
+
+// 获取样式配置
+const styleConfig = panelConfig.getStyleConfig()
+```
+
+### 枚举数据 (enumData)
+
+提供各种枚举数据：
+
+```javascript
+import { enumData } from '@jzliu-cli/bi-engine'
+
+// 聚合器映射
+console.log(enumData.aggregatorMap)
+
+// 表格类型映射
+console.log(enumData.tableTypeZnMap)
+
+// 图表系列颜色
+console.log(enumData.chartSeriesColors)
+
+// 线条类型映射
+console.log(enumData.lineTypeMap)
+```
+
+### 模拟数据 (mockData)
+
+用于开发和测试的模拟数据：
+
+```javascript
+import { mockData } from '@jzliu-cli/bi-engine'
+
+// 获取示例图表数据
+const sampleChartData = mockData.getSampleChartData()
+
+// 获取仪表板配置示例
+const sampleDashboardConfig = mockData.getSampleDashboardConfig()
+```
+
+### Store 配置 (storeConfig)
+
+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)
+
+## 🔧 开发配置
+
+### 本地开发
+
+```bash
+# 克隆项目
+git clone <repository-url>
+
+# 安装依赖
+yarn install
+
+# 启动开发服务器
+yarn build:watch
+
+# 构建生产版本
+yarn build
+```
+
+### 本地链接测试
+
+```bash
+# 在 biDashboard 目录中
+yarn link
+
+# 在测试项目中
+yarn link "@jzliu-cli/bi-engine"
+```
+
+## 📋 依赖要求
+
+### 必需依赖
+- Vue: ^2.6.11
+- Element UI: ^2.15.10
+- Vuex: ^3.6.2
+- @antv/g2plot: ^2.4.13
+
+### 可选依赖
+- lodash: ^4.17.21
+- vue-grid-layout: ^2.3.12
+- vuedraggable: ^2.24.3
+
+## 🎯 使用示例
+
+### 基础图表渲染
+
+```vue
+<template>
+  <div class="chart-container">
+    <chart-render 
+      :chartData="chartData"
+      :styleConfig="styleConfig"
+    />
+  </div>
+</template>
+
+<script>
+import { chartRender } from '@jzliu-cli/bi-engine'
+
+export default {
+  components: { chartRender },
+  data() {
+    return {
+      chartData: {
+        type: 'Column',
+        name: '销售数据',
+        data: {
+          meta: [
+            { field: 'category', name: '类别' },
+            { field: 'value', name: '数值' }
+          ],
+          data: [
+            { category: 'A', value: 100 },
+            { category: 'B', value: 200 },
+            { category: 'C', value: 150 }
+          ]
+        },
+        fields: [
+          {
+            label: '类别轴',
+            type: 'dimension',
+            chooseFields: [{ name: 'category' }]
+          },
+          {
+            label: '值轴', 
+            type: 'measure',
+            chooseFields: [{ name: 'value' }]
+          }
+        ]
+      },
+      styleConfig: {
+        commongConfig: {
+          showTitle: true,
+          backgroundColor: '#fff'
+        }
+      }
+    }
+  }
+}
+</script>
+```
+
+### 完整仪表板
+
+```vue
+<template>
+  <div class="dashboard">
+    <bi-dashboard 
+      :config="dashboardConfig"
+      @dashboard-updated="handleDashboardUpdate"
+      @chart-selected="handleChartSelect"
+    />
+  </div>
+</template>
+
+<script>
+import BiDashboard from '@jzliu-cli/bi-engine'
+
+export default {
+  components: { BiDashboard },
+  data() {
+    return {
+      dashboardConfig: {
+        layout: [],
+        dashboardName: '我的仪表板'
+      }
+    }
+  },
+  methods: {
+    handleDashboardUpdate(newConfig) {
+      console.log('仪表板已更新:', newConfig)
+    },
+    handleChartSelect(chartData) {
+      console.log('图表已选中:', chartData)
+    }
+  }
+}
+</script>
+```
+
+## 🐛 问题排查
+
+### 常见问题
+
+1. **样式不生效**
+   - 确保已导入 Element UI 样式
+   - 检查样式隔离前缀是否正确
+
+2. **图表不显示**
+   - 检查数据格式是否正确
+   - 确认字段映射配置
+
+3. **组件未注册**
+   - 确保已正确使用 `Vue.use(BiDashboard)`
+   - 检查组件名称拼写
+
+### 调试模式
+
+```javascript
+// 开启调试模式
+Vue.use(BiDashboard, {
+  debug: true,
+  config: {
+    // 自定义配置
+  }
+})
+```
+
+## 📄 许可证
+
+MIT License
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📞 支持
+
+如有问题，请联系：
+- 邮箱: support@jzliu-cli.com
+- 文档: [在线文档](https://docs.jzliu-cli.com/bi-engine)
+
+---
+
+**注意**: 本组件库基于 Vue 2.x 开发，如需使用 Vue 3，请等待后续版本更新。