@travel-screen/l-module-components 1.0.0

package/README.md

@@ -0,0 +1,86 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: '08114faf-f9a3-45bb-9dd9-aec85ed6e46e'
+  PropagateID: '08114faf-f9a3-45bb-9dd9-aec85ed6e46e'
+  ReservedCode1: '1979d7a3-a59f-4722-a4f7-c6d43d40fcac'
+  ReservedCode2: '1979d7a3-a59f-4722-a4f7-c6d43d40fcac'
+---
+
+# L-Module-Components
+
+数据可视化大屏组件库 - 暗黑科技风 Vue 2 组件集。
+
+## 安装
+
+已在主项目 `package.json` 中配置为本地依赖：
+
+```json
+"l-module-components": "file:./lib/l-module-components"
+```
+
+执行 `pnpm install` 即可安装。
+
+## 使用方式
+
+### 全量注册
+
+```js
+import LModuleComponents from 'l-module-components/src'
+
+Vue.use(LModuleComponents)
+```
+
+注册后可在模板中直接使用所有组件：
+
+```html
+<l-module-box title="客流分析">
+  <l-bar-chart :dataList="chartData" />
+</l-module-box>
+```
+
+### 按需导入
+
+```js
+import { LBarChart, LModuleBox, LTrendCard } from 'l-module-components/src'
+
+export default {
+  components: { LBarChart, LModuleBox, LTrendCard }
+}
+```
+
+### 导入工具函数
+
+```js
+import { dealPercentdDisplay, judgeRateType } from 'l-module-components/src'
+```
+
+## 组件列表
+
+| 组件 | 标签名 | 说明 |
+|------|--------|------|
+| LBarChart | `<l-bar-chart>` | ECharts 柱状图 |
+| LDataPanel | `<l-data-panel>` | 3卡片数据面板 |
+| LDataRing | `<l-data-ring>` | 环形指标展示 |
+| LDatePicker | `<l-date-picker>` | 日期选择器（基于 Element UI） |
+| LIconLabel | `<l-icon-label>` | 图标标签卡片 |
+| LLabelValue | `<l-label-value>` | 标签数值展示 |
+| LMetricTile | `<l-metric-tile>` | 指标卡片 |
+| LModuleBox | `<l-module-box>` | 模块容器 |
+| LModuleTag | `<l-module-tag>` | 模块标签 |
+| LRankList | `<l-rank-list>` | 排行榜列表 |
+| LStatCard | `<l-stat-card>` | 统计卡片 |
+| LTabs | `<l-tabs>` | 选项卡 |
+| LTrendCard | `<l-trend-card>` | 趋势卡片 |
+
+## 依赖说明
+
+本组件库依赖以下第三方包（已声明在 peerDependencies/dependencies 中）：
+
+- `vue` ^2.6.0（宿主项目提供）
+- `echarts` ^5.5.1（LBarChart 使用）
+- `element-ui` 2.13.2（LDatePicker 使用 el-date-picker）
+
+> AI生成

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@travel-screen/l-module-components",
+  "version": "1.0.0",
+  "description": "数据可视化大屏组件库 - 暗黑科技风 Vue 2 组件集",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vue-cli-service build --target lib --name l-module-components --dest lib src/index.js"
+  },
+  "dependencies": {
+    "echarts": "^5.5.1",
+    "element-ui": "2.13.2"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "component",
+    "dashboard",
+    "echarts",
+    "datav",
+    "dark-theme",
+    "visualization"
+  ],
+  "license": "MIT"
+}

package/src/index.js

@@ -0,0 +1,60 @@
+/**
+ * L-Module-Components 入口文件
+ * 支持全量注册（Vue.use）和按需导入
+ */
+
+// 按需导出各组件
+export { default as LBarChart } from './l-bar-chart'
+export { default as LDataPanel } from './l-data-panel'
+export { default as LDataRing } from './l-data-ring'
+export { default as LDatePicker } from './l-date-picker'
+export { default as LIconLabel } from './l-icon-label'
+export { default as LLabelValue } from './l-label-value'
+export { default as LMetricTile } from './l-metric-tile'
+export { default as LModuleBox } from './l-module-box'
+export { default as LModuleTag } from './l-module-tag'
+export { default as LRankList } from './l-rank-list'
+export { default as LStatCard } from './l-stat-card'
+export { default as LTabs } from './l-tabs'
+export { default as LTrendCard } from './l-trend-card'
+
+// 导出工具函数
+export { dealPercentdDisplay, judgeRateType } from './utils/util'
+export { tooltipItemsHtmlString } from './utils/tooltip'
+
+// 组件列表
+const components = [
+  require('./l-bar-chart').default,
+  require('./l-data-panel').default,
+  require('./l-data-ring').default,
+  require('./l-date-picker').default,
+  require('./l-icon-label').default,
+  require('./l-label-value').default,
+  require('./l-metric-tile').default,
+  require('./l-module-box').default,
+  require('./l-module-tag').default,
+  require('./l-rank-list').default,
+  require('./l-stat-card').default,
+  require('./l-tabs').default,
+  require('./l-trend-card').default
+]
+
+/**
+ * 全量注册所有组件
+ * @param {Object} Vue - Vue 构造函数
+ */
+const install = function(Vue) {
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+// 支持浏览器直接引入（CDN 方式）
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  version: '1.0.0',
+  install
+}

package/src/l-bar-chart/README.md

@@ -0,0 +1,302 @@
+---
+AIGC:
+  ContentProducer: '001191110102MAD55U9H0F10002'
+  ContentPropagator: '001191110102MAD55U9H0F10002'
+  Label: '1'
+  ProduceID: '206b7c92-a1d7-4576-ad36-dbf6c00b4b50'
+  PropagateID: '206b7c92-a1d7-4576-ad36-dbf6c00b4b50'
+  ReservedCode1: '45845310-f991-4483-a31d-adf048dad8a3'
+  ReservedCode2: '45845310-f991-4483-a31d-adf048dad8a3'
+---
+
+# LBarChart 组件说明
+
+## 概述
+
+`LBarChart` 是一个参数化驱动的柱状图组件，采用类似 Element UI 的封装方式。所有 ECharts 配置（渐变色、柱状图样式、图例、坐标轴等）均通过 props 参数动态控制。
+
+## 核心特性
+
+- ✅ **Props 驱动**：所有样式通过 props 参数控制，类似 Element UI
+- ✅ **高度灵活**：支持自定义渐变色、柱状图宽度、圆角、图例等
+- ✅ **导出功能**：支持导出图片和 CSV 数据
+- ✅ **滚动条支持**：自动判断或手动控制 X 轴滚动条
+- ✅ **工具箱**：支持保存为图片、数据视图、导出 CSV
+
+## 文件结构
+
+```
+l-bar-chart/
+├── interface/
+│   └── index.js                # Props 定义（30+ 个参数）
+├── index.vue                   # 主组件
+└── README.md                   # 组件说明文档
+```
+
+## Props 参数
+
+### 基础配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `width` | String | `'100%'` | 容器宽度 |
+| `height` | String | `'100%'` | 容器高度 |
+| `title` | String | `''` | 图表标题（Y轴名称） |
+| `tooltips` | String | `''` | 提示框单位文字 |
+| `dataList` | Array | `[]` | 图表数据：`[类型数组, X轴数据, 多系列数据]` |
+| `animation` | Boolean | `false` | 是否开启动画 |
+
+### 柱状图样式
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `barWidth` | Number | `7` | 柱状图宽度（像素） |
+| `barBorderRadius` | Array/Object | `[5, 5, 0, 0]` | 柱状图圆角：`[上左, 上右, 下右, 下左]` |
+| `lineColor` | Array | `[]` | 柱状图渐变色配置数组 |
+| `showAreaStyle` | Boolean | `true` | 是否显示渐变区域 |
+
+### 图例配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `legendIsShow` | Boolean | `true` | 是否显示图例 |
+| `legendTop` | Number | `-15` | 图例顶部偏移 |
+| `legendIcon` | String/Boolean | `'circle'` | 图例图标形状 |
+| `itemWidth` | Number | `10` | 图例图标宽度 |
+| `itemHeight` | Number | `10` | 图例图标高度 |
+
+### 字体样式
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `fontColor` | String | `'rgba(188, 205, 235, 1)'` | 字体颜色 |
+| `fontSize` | Number | `14` | 字体大小 |
+| `toolSize` | Number | `null` | 提示框字体大小 |
+
+### 网格配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `grid` | Object | `{ left: 50, right: 20, top: 25, bottom: 91 }` | 图表边距 |
+
+### X轴配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `interval` | Number/String | `'auto'` | X轴标签间隔 |
+
+### Y轴配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `yMax` | Number | `null` | Y轴最大值 |
+| `yInterval` | Number | `null` | Y轴刻度间隔 |
+| `axisLabelShow` | Boolean | `true` | 是否显示Y轴标签 |
+
+### 工具箱配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `showToolbox` | Boolean | `false` | 是否显示工具箱 |
+| `showDataView` | Boolean | `false` | 是否显示数据视图 |
+
+### 导出配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `exportFileName` | String | `'chart-export'` | 导出文件名 |
+| `exportPixelRatio` | Number | `2` | 导出图片像素比 |
+| `exportType` | String | `'png'` | 导出图片类型（png/jpeg） |
+
+### 滚动条配置
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `showDataZoom` | Boolean/String | `'auto'` | 是否显示滚动条 |
+| `dataZoomThreshold` | Number | `15` | 滚动条阈值 |
+| `dataZoomStart` | Number | `0` | 滚动条起始位置 |
+| `dataZoomEnd` | Number | `50` | 滚动条结束位置 |
+| `dataZoomHeight` | Number | `20` | 滚动条高度 |
+
+## 使用方式
+
+### 基本使用
+
+```vue
+<template>
+  <l-bar-chart
+    :dataList="chartData"
+    title="单位：人次"
+  />
+</template>
+
+<script>
+import LBarChart from '@/components/moduleDataNew/l-bar-chart/index.vue'
+
+export default {
+  components: {
+    LBarChart
+  },
+  data() {
+    return {
+      chartData: [
+        ['旅游人次'],
+        ['3.10', '3.11', '3.12', '3.13', '3.14', '3.15', '3.16'],
+        [[212, 302, 222, 112, 102, 222, 282]]
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 自定义渐变色
+
+```vue
+<template>
+  <l-bar-chart
+    :dataList="chartData"
+    :lineColor="[
+      { color1: 'rgba(131, 255, 153, .1)', color2: 'rgba(131, 255, 153, .5)', color3: 'rgba(51, 204, 115, 1)' },
+      { color1: 'rgba(255, 199, 61, 1)', color2: 'rgba(255, 199, 61, .5)', color3: 'rgba(255, 199, 61, .1)' }
+    ]"
+  />
+</template>
+```
+
+### 启用工具箱和导出功能
+
+```vue
+<template>
+  <l-bar-chart
+    :dataList="chartData"
+    :showToolbox="true"
+    :showDataView="true"
+    exportFileName="旅游人次统计"
+    :exportPixelRatio="2"
+  />
+</template>
+```
+
+### 启用滚动条
+
+```vue
+<template>
+  <l-bar-chart
+    :dataList="chartData"
+    :showDataZoom="'auto'"
+    :dataZoomThreshold="10"
+    :dataZoomStart="0"
+    :dataZoomEnd="50"
+  />
+</template>
+```
+
+### 完整自定义
+
+```vue
+<template>
+  <l-bar-chart
+    :dataList="chartData"
+    title="单位：人次"
+    :barWidth="10"
+    :barBorderRadius="[8, 8, 0, 0]"
+    :fontSize="12"
+    :fontColor="'#FFFFFF'"
+    :grid="{ left: 60, right: 30, top: 40, bottom: 80 }"
+    :legendIsShow="true"
+    :legendTop="-10"
+    legendIcon="rect"
+    :showToolbox="true"
+    exportFileName="旅游统计报表"
+    :showDataZoom="'auto'"
+    :dataZoomThreshold="15"
+  />
+</template>
+```
+
+## 数据结构
+
+### dataList 格式
+
+```javascript
+[
+  ['类型1', '类型2'],              // 系列名称数组
+  ['3.10', '3.11', '3.12'],        // X轴数据
+  [
+    [212, 302, 222],               // 系列1数据
+    [150, 200, 180]                // 系列2数据
+  ]
+]
+```
+
+## 方法
+
+### exportChartImage(options)
+
+导出图表为图片。
+
+**参数**：
+- `options.fileName`：文件名（默认使用 `exportFileName`）
+- `options.pixelRatio`：像素比（默认使用 `exportPixelRatio`）
+- `options.type`：图片类型（默认使用 `exportType`）
+
+**示例**：
+```javascript
+this.$refs.chart.exportChartImage({
+  fileName: 'my-chart',
+  pixelRatio: 3,
+  type: 'jpeg'
+})
+```
+
+### exportDataCSV(fileName)
+
+导出数据为 CSV 格式。
+
+**参数**：
+- `fileName`：文件名（默认使用 `exportFileName`）
+
+**示例**：
+```javascript
+this.$refs.chart.exportDataCSV('my-data')
+```
+
+### cDispose()
+
+销毁图表实例。
+
+**示例**：
+```javascript
+this.$refs.chart.cDispose()
+```
+
+## 注意事项
+
+1. **数据格式**：`dataList` 必须按照 `[类型数组, X轴数据, 多系列数据]` 的格式传入
+2. **渐变色**：`lineColor` 数组的每一项包含 `color1`、`color2`、`color3` 三个颜色值
+3. **滚动条**：`showDataZoom='auto'` 时，数据点超过 `dataZoomThreshold` 自动显示滚动条
+4. **工具箱**：开启 `showToolbox` 后，图例会自动向左偏移空出工具箱空间
+5. **导出功能**：支持导出 PNG/JPEG 图片和 CSV 数据文件
+6. **响应式**：组件会自动监听 `dataList` 变化并重新渲染图表
+
+## 适用场景
+
+- ✅ 旅游人次统计展示
+- ✅ 销售数据对比分析
+- ✅ 多维度数据柱状图展示
+- ✅ 需要导出图表和数据的场景
+- ✅ 数据量大需要滚动查看的场景
+
+## 更新日志
+
+- **v1.0.0** (2026-06-18)
+  - 从 `barEchart` 重命名为 `l-bar-chart`
+  - 参考 `l-rank-list` 封装结构进行参数化重构
+  - 所有 ECharts 配置项抽离为 Props 参数
+  - 添加详细的字段注释说明
+  - 支持导出图片和 CSV 数据
+  - 支持 X 轴滚动条自动判断
+  - 支持工具箱功能
+
+> AI生成