《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个ReportPlus数据报表中心小程序。
特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件文档详细，且调用简单方便、性能及体验极佳。 ucharts图表插件。使用wyb-tav=ble插件完成表格功能，支持图表排序、滚动等众多功能，上手极其方便。 table表格插件对页面、图表、表格都进行了封装，用户只需要进行数据组装即可快速完成页面的布局。ReportPlus的页面综合报表
会员报表
下载原生uCharts下载
全端全平台支持，开箱即用，支持PC、H5、小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东）、Vue、Taro等更多支持canvas的框架，体积小巧、调用简单方便、性能及体验极佳。
@qiun/ucharts
uCharts组件下载
相比原生 uCharts 具有使用方便、调用简单、页面简洁等特点。假如您是新手，那么一定要先从组件入手，因为官方组件已经替您写好了一些常用的方法，避开了一些平台的坑，您只需专注业务及数据，不必再为原生开发踩坑浪费时间。
~qiun使用
由于其他图表都有对应的插件文件，所以仅对data-progress和text-block封装的参数做说明
进度条 (data-progress)
params类型说明dataTypestring不传表示不展示目标值和现在值，传则展示expectstring目标值nowstring现在达成值valuestring现在达成值/目标值
文本块 (text-block)
params类型说明kindstring表示使用哪种类型的文本块backgroundstring背景颜色contentarray该文本框内文本内容
kind目前取值：1,2,3,4,5(注意：content中：文本放text中，数字放value，colortext为文本颜色，colorvalue为数字颜色)分两层，上层纯数字，下纯文字 的排版类型{ "kind":1, "background":["#3EB2F5","#9374F7"], "content":[ {"text":"","value":"5860","colortext":"","colorvalue":"#fff","size":"44rpx"}, {"text":"新增微好友","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"} ]}分两层，上层文字+数字，下层文字+数字 的排版类型
{ "kind":2, "background":["#B678FD","#4A64F9"], "content":[ {"text":"环比增长","value":"3.2%","colortext":"#fff","colorvalue":"#fff","size":"24rpx"}, {"text":"同比增长","value":"1.1%","colortext":"#fff","colorvalue":"#fff","size":"24rpx"} ]}分三层，上层纯数字，中层纯文字，下层分左右块，左下层文+数，右下层文+数 的排版类型
{ "kind":3, "background":["#B678FD","#4A64F9"], "content":[ {"text":"","value":"38%","colortext":"","colorvalue":"#fff","size":"44rpx"}, {"text":"小程序购买活跃会员占比","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"}, {"text":"同比","value":"2.5%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"}, {"text":"环比","value":"3.2%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"} ]}分三层，上层纯文字，中层纯数字，下层文+数， 的排版类型
{ "kind":4, "background":["#F0F0F0","#F0F0F0"], "content":[ {"text":"已评价数","value":"","colortext":"#000","colorvalue":"","size":"24rpx"}, {"text":"","value":"161","colortext":"","colorvalue":"#09A1FD","size":"44rpx"}, {"text":"增长","value":"","colortext":"#000","colorvalue":"","size":"20rpx"}, {"text":"up","value":"325","colortext":"#DF297D","colorvalue":"#f25287","size":"20rpx"} ]}分5层，具体可看会员运营-活跃会员的板块
{ "kind":5, "background":["#F77E89","#F7953B"], "content":[ {"text":"会员销售占比","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"}, {"text":"","value":"80%","colortext":"","colorvalue":"#fff","size":"44rpx"}, {"text":"环比","value":"81.5%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"}, {"text":"同比","value":"-81.3%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"}, {"text":"平均参考水平","value":"85%","colortext":"#fff","colorvalue":"#fff","size":"20rpx"} ]},常见问题
问题一：图表偶尔加载不出或直接显示报错页面
原因：canvasId重复导致图表加载不出；canvasId丢失导致无法获得dom；解决方法：请务必在组件上定义canvasId，不能为纯数字、不能为变量、不能重复、尽量长一些;请检查微信小程序的基础库，修改至2.16.0或者最新版本的基础库;请检查父元素或父组件是否用v-if来控制显示，如有请改为v-show，并将v-show的逻辑绑定至组件。问题二：图表点击显示不出提示信息或点击位置不精准
原因：组件内嵌套组件 + 开启2d模式 + 组件中使用scroll-view标签，使得获取图表的定位不准解决方法：组价内加入属性 :inScrollView="true" :pageScrollTop="pageScrollTop" :ontouch="true" ，其中pageScrollTop为当前滚动距离顶部的高度-END-
开源协议：MIT
开源地址：
草料二维码暂不支持自动计算功能，无法看到实时的库存数量。但可以使用外部数据分析工具，如百度Sugar，连接草料二维码官方数据库，即可自由实现各类计算，包括实时库存。
一、案例效果
输入物料名称，即可快速查询各物料的实时库存。
使用前须知
由于涉及了基础的数据库（SQL）操作与BI工具操作，教程中会出现各类专业的名词，不要被这些名词吓到。使用中不需要会写程序，也不需要懂专业知识。只要按照教程进行操作就能完成。
二、如何开通草料官方数据库登录草料二维码后，点击后台左侧高级功能–数据API ，选择官方数据库
点击草料后台数据API，选择官方数据库
官方数据库申请成功后得到的数据库示例如下图所示：
三、使用BI工具制作报表/大屏基本流程（以实时库存为例）
首先明确要进行分析的对象，然后再去找对应的数据表。譬如需要得到实时库存，那就需要有原始库存，还有出入库数据。通过对出入库求和再加上原始库存就可以得到实时库数。 原始库存数在批量数据表中，出入库数据在出入库表单记录表中。
报表制作流程图
step1. 准备数据
1.1 连接数据库
如图所示，选择图中输入的类型，填上来自草料二维码官方数据库的信息，点击添加键即可。
1.2 创建数据模型
创建数据模型，从数据库中拖入所需的数据表。如果需要分析的是实时库存情况，就可以选择如图2所示的数据表，同时关联上图3所示的数据表来获取各物料的出入库数据。
图1:选择数据模型并点击新建数据模型
图2:选择该数据表进行拖入
图3:拖入出入库数据表（与第一个表后缀数字不同），并设置为左连接，输入关联条件
1.3 整理数据（很多用户都在此环节出现问题，请仔细阅读）
● 字段重命名
为了防重名，字段后面有数字后缀，重命名后方便后续使用。
● 修改字段类型
出入库字段默认识别为了字符串，无法进行求和试算，需转为数字。
● 转成度量
出入库数量需要进行求和统计，需转成度量。
将其它字段也进行同样的设置，主要是出库数量、入库数量、原始库存这几个字段。
● 添加计算度量（实时库存）
输入所图所示的计算公式，类似于Excel。
输入此计算公式并选择数据类型
● 添加筛选字段 （视实际情况）
去掉些不需要的数据。比如表单中有审核功能，只有审核通过的才能算数进行计算，那就得去掉待审核、审核未通过的数据。
step2. 制作报表
Sugar支持报表与大屏，这里介绍报表的创建方法，大屏创建方法同理。
这两者之间的区别在于，大屏是一屏显示，各图表可以精细编辑，用于大屏展示；报表是上下浏览，内容更多，便于内部分享分析。
2.1 创建报表
2.2 制作图表
选择图表/表格（两者皆可），来展示各物品的实时库存数。
操作步骤：
选择数据模型 -> 拖入物料编号（唯一编号）和其它批量信息
切记不要拖入出入库表单的任何字段维度，比如记录时间、记录人等信息。因为一旦拖入维度，就会按照这些维度进行分类汇总。譬如拖入记录时间后，就会以单条记录来汇总，但实时库存需要按照物料编号进行汇总。
step3. 报表美化与筛选项设置
添加筛选组件：
筛选组件可以帮我们查看指定数据的情况，是报表中常用的组件。
添加数据模型，选择数据字段
勾选关联的图表，系统会自动给你关联上引用过此字段的图表
step4. 分享使用
设置分享（发布）为公开，复制链接就可以进行分享使用了。
step5. 链接到草料二维码
草料二维码已与百度合作，支持在草料二维码小程序中直接打开链接 Sugar报表。不会提示复制链接到浏览器中打开。
操作方式：可以在批量模板插入跳转链接- 选择样式- 设置链接 - 选择外部链接 - 输入Suga报表链接。
在报表开发过程中，为提高操作性，可以添加相关的图标，SAP系统内置了大部分功能的图标，开发人员可以直接使用。
图标查找
通过 TCODE 查找图标对应的图标名称
执行 TCODE：ICON 查找图标对应的图标名称
sap图标
通过查出图标名称查找对应的图标 ID
SE11 类型池根据方法一查找的 ICON 名称对应的图标 ID
通过程序 SHOWICON 查找，开发时推荐使用此方法
程序名：SHOWICON
SE38 运行可以显示 SAP 所有的 ICON（图标），显示列表之后，双击任何一个图标可以显示出每一个图标的详细信息（名称、长度、ID 等）。
图标使用
使用图标 ID
DATA: ICON(20) TYPE C.
ICON = ‘@39@ 使用图标名称显示’.
“或 ICON = ‘@B_GENR@ 使用图标名称显示’.
“或 CONCATENATE ‘@39@’ ‘使用图标名称显示’ INTO ICON
“或 CONCATENATE ‘@B_GENR@’ ‘使用图标名称显示’ INTO ICON
WRITE: ICON.