王炸,可商用!一款基于uni-app实现的数据报表系统,支持图表 + 表格 + 进度条 + 文本块,开箱即用

点击下方【开源放大镜】 "关注"、选择  "设为标星"

每天三分钟、打卡阅读

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

前言

前段时间有个读者投稿：公司是做会员管理SaaS的，客户要在小程序里加一个数据报表中心，展示会员增长曲线、销售占比、活跃会员占比等核心指标。公司人手不够，找了一家外包公司，报价2万多，说要从零画图表、调样式，3周才能交付，预算严重超了工期也长，最终老板把任务又扔给了他。

它自己评估了一下，从零用ECharts对接小程序，光canvasId重复、层级穿透、scroll-view嵌套定位偏这些坑就要调试三四天，更别说把综合报表和会员报表两个页面设计到让客户满意。所以希望我帮忙在社区中看看有没有现成的一些方案，可以减少大部分的重复性开发。

后来我在开源社区帮他找了一套超高颜值的报表开源模板，组件基本都封装好了，仅需按照给定的数据格式输入即可渲染出各类报表界面。

最后粉丝用10天就把工作交付了，客户验收一次性通过，还给我一个大红包。遇到需求时千万不要闷头就开发，多找找市场上的成熟产品。

简介

ReportPlus是一款基于uni-app构建的开源数据报表小程序模板库，可帮助开发者快速开发高颜值、多端兼容的数据报表页面。系统集ucharts图表展示、wyb-table表格、日历组件、排行榜组件、条形进度条、文本块等封装组件于一体，兼容微信小程序、H5等多端平台使用。

系统对页面、图表、表格都进行了高度封装，用户只需按给定格式传递数据即可快速完成各类报表页面设计。项目基于uni-app + uCharts + wyb-table构建，支持二次拓展，一套代码即可覆盖多个平台。十分适合接数据报表小程序外包、企业内部报表展示、会员运营数据看板等场景使用。

功能列表

• 综合报表模板：

• 系统内置一套完善的综合报表模板，集ucharts图表、表格、进度条、文本块等组件，展示新增微好友、环比同比增长、活跃会员占比等核心指标，开发者按数据格式传参即可直接复用，可节省大部分排版和重复开发的时间。

• 会员报表模板：

• 系统内置会员报表模板，可用于展示会员销售占比、活跃会员、平均参考水平等会员运营核心数据，支持5种文本块排版类型，用户可直接套用，简单快捷。

• 图表组件：

• 内置uni-app中最受欢迎的uCharts插件，可快速完成各类图表展示，调用简单、覆盖折线图、柱状图、饼图、环形图等常用图表类型。

• 表格组件：

• 内置wyb-table插件完成表格功能，支持图表排序、滚动等众多功能，报表里的数据表格可开箱即用，简单高效。

• 日历组件：

• 高度封装日历组件，适用于报表按日筛选、签到日历、日程展示等场景，减少重复造轮子。

• 排行榜组件：

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

• 条形进度条组件：

• 支持目标值、现在达成值、达成率等核心指标展示，不传dataType则只显示进度条，传则展示目标值和现在值，灵活适配不同展示场景。

• 文本块组件：

• 支持5种排版类型（kind 1-5），覆盖报表常见的指标卡展示样式，背景色、文字色、数字色都可自定义，适配多种场景。

• 多端兼容：

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

• 组件化数据驱动：

• 系统对页面、图表、表格都进行了封装，用户仅需关注数据组装而不用关心组件内部实现。

功能截图

会员报表模板： 内置销售占比、活跃会员、平均参考水平等会员运营核心数据展示组件

综合报表模板： 集成了ucharts图表、wyb-table表格、data-progress进度条、text-block文本块等多种组件，展示新增微好友、环比同比增长、活跃会员占比等运营指标

财务报表中心： 内置各类财务指标组件，可开箱即用

系统架构

架构组成：

├─ 页面层（pages）│  ├─ 综合报表页面（集成图表、表格、进度条、文本块）│  └─ 会员报表页面（kind 5 五层文本块、占比指标展示）│├─ 组件层（components）│  ├─ data-progress（条形进度条，支持目标值/现在值/达成率）│  └─ text-block（文本块，支持 kind 1-5 五种排版类型）│└─ 插件层（uni_modules）   ├─ qiun-data-charts（ucharts图表组件）   └─ wyb-table（表格组件，支持排序/滚动）

技术栈：

  开发框架: uni-app（跨平台）  图表组件: uCharts（qiun-data-charts）  表格组件: wyb-table  封装组件: 日历、排行榜、条形进度条、文本块  目标平台: 微信小程序、H5等多端  开发工具: HBuilderX

快速开始

1、环境准备：

- HBuilderX 最新版- 微信开发者工具- Node.js 16+

2、下载项目：

cd ReportPlus

3、导入项目： 打开HBuilderX，选择"文件 → 导入 → 从本地目录导入"，选中项目根目录。

4、运行到微信小程序： 修改manifest.json中的小程序appid，点击HBuilderX上方"运行 → 运行到小程序模拟器 → 微信开发者工具"，即可在模拟器中预览综合报表、会员报表页面。

5、运行到H5： 点击"运行 → 运行到浏览器"，即可在浏览器中预览H5端效果。

更新进度

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

开源地址

往期精彩

2026远程工具天花板！一套功能超齐全的桌面运维工具，支持20+连接类型、文件浏览器、终端启动器、可开箱即用

别再花几万做数据大屏了！一套功能超齐全的大屏可视化系统，支持拖拽编辑 + 图表组件 + 多屏管理，可开箱即用

请别花几十万做物联网平台了！一套功能超齐全的IoT平台，支持零代码侵入 + 驱动热部署 + 多协议接入，可开箱即用

获取更多精彩内容和开源项目  ，请关注微信公众号！ 

免责声明

1、本文所分享的软件、代码或资源，均来自开源社区，遵循其原始许可证（如MIT、GPL等）。仅供学习和研究使用，严禁用于任何违法行为。2、使用者在下载、部署或使用本项目（或文中提及的软件）时，需自行判断其适用性与合法性，由此产生的一切风险与责任均由使用者自行承担。3、我们尊重原作者的知识产权，已在文中注明来源及原始作者（如有遗漏，请联系我们及时更正或删除）。4、本文不对开源软件的安全性、可用性或完整性做任何保证，亦不承担由其引发的任何直接或间接损失责任。5、若您为相关软件/资源的版权方，对内容有异议，请联系我们，我们将在第一时间处理

商务合作、软件开发、项目推广、GPT账号、GPT-PLUS，请联系：