数据大屏神器!一款开源的精美数据报表模板,内置日历、表格、排行榜、进度条、文本块及 uCharts 多种图表组件

点击下方【IT学习日记】 "关注"、选择  "设为标星"

每天三分钟、打卡阅读

最快获取全网学习干货、行业资讯

简介

ReportPlus是一款美观大气、开源免费的数据报表模板库，专为需要快速搭建数据展示页面的用户设计。

系统高度封装了日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及 uCharts的多种常用图表组件，用户只需按照规定格式导入数据，即可快速搭建出不同业务场景下的报表界面。

系统以"封装复用、数据驱动"为核心理念，采用uni-app框架开发，支持小程序、H5等多端使用，一套代码即可覆盖多个平台。十分适合独立开发者、接单外包团队、企业内部报表开发等用户使用。

功能列表

• 图表展示：

• 使用 uni-app 中最受欢迎的 uCharts 插件实现图表展示。支持多种图表类型，包括折线图、柱状图、饼图等，满足不同场景下数据可视化需求。

• 日历组件：

• 高度封装日历组件，适配展示不同日期形式的数据，可应用于报表按日筛选、签到日历、日程展示等场景。

• 排行榜组件：

• 内置排行榜组件，可适用于展示会员榜、销售榜、活跃榜等数据展示场景。

• t文本块组件：

• 支持5种排版类型（kind 1-5），涵盖纯数字、文字+数字等多种布局风格。

• 支持自定义背景色、文字色、数字色、字号，满足不同业务场景下数据展示需求。

• 综合报表管理：

• 内置综合报表页面，集成图表、表格、进度条、文本块等组件，可用于展示新增微好友、环比同比增长、活跃会员占比等运营指标，。

• 会员报表管理：

• 内置会员报表页面，可用于展示会员销售占比、活跃会员、平均参考水平等会员运营核心数据。

• 多端兼容：

• 基于uni-app构建，一套代码兼容微信小程序、H5等多端平台，简单快捷。

• 组件化数据驱动：

• 系统对页面、图表、表格都进行了单独封装，无需关心组件内部实现，用户只需要进行数据组装即可快速完成各类页面布局。

• 定位适配：

• 针对组件嵌套加2d模式加scroll-view导致点击定位不准的问题，内置inScrollView、pageScrollTop、ontouch属性适配优化。

功能截图

综合报表页面：

会员报表页面：

数据报表中心：

智慧报表中心：

财务报表中心：

系统架构

项目结构：

├── pages/                    # 报表页面│   ├── comprehensive/        # 综合报表页面│   └── member/               # 会员报表页面│├── components/               # 自封装组件│   ├── data-progress/        # 条形进度条组件│   └── text-block/           # 文本块组件（5种排版）│├── uni_modules/              # 第三方插件│   ├── qiun-data-charts/     # ucharts图表组件│   └── wyb-table/            # 表格组件│├── static/                   # 静态资源├── pages.json                # 页面配置└── manifest.json             # 小程序配置

技术栈：

开发语言：JavaScript、Vue前端框架：uni-app图表组件：uCharts（qiun-data-charts）表格组件：wyb-table封装组件：日历、排行榜、条形进度条、文本块目标平台：微信小程序、H5部署方式：HBuilderX 编译 / 静态产物部署开发工具：HBuilderX

快速开始

1、环境准备：

- HBuilderX 最新版（uni-app官方IDE）- 微信开发者工具（小程序调试）- Node.js 16+

2、下载源码： 文后获取

3、导入HBuilderX： 打开HBuilderX，选择"文件 → 导入 → 从本地目录导入"，选中项目根目录，HBuilderX会自动识别uni-app项目结构。

4、检查uni_modules： 项目依赖通过uni_modules管理，导入后确认qiun-data-charts、wyb-table等插件已存在，缺失时可从DCloud插件市场重新安装。

5、运行到微信小程序： 修改manifest.json中的小程序appid，点击"运行 → 运行到小程序模拟器 → 微信开发者工具"，在模拟器中预览综合报表、会员报表页面，验证ucharts图表和wyb-table表格渲染效果。

6、运行到H5： 点击"运行 → 运行到浏览器"，在浏览器中预览H5端效果，对比小程序端表现，验证多端兼容性。

更新进度

1000+优质开源项目更新进度：556/1000。如需更多类型优质项目推荐，请在文章后留言。

开源地址

往期精彩