Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

UReport数据报表中心小程序

升级版UReport已上线!!全新体验请查看howcode-report插件

  • 解决图层等级问题!(本插件也已解决)
  • 真正全端跨域图表!(本插件也更换成uchart2.0版本)
  • 基于uniCloudAdmin框架,使用云函数开发!
  • 搭配权限系统,可手动分配角色权限!
  • 体验更加友好!

若不想使用升级版,可继续使用该插件!

该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能,感谢作者秋云和SirW的优秀开源项目

下载地址

无偿开源!你们的start是我的动力!

快速体验

在这里插入图片描述

特点

  • 使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示,该插件文档详细,且调用简单方便、性能及体验极佳。 ucharts图表插件
  • 使用wyb-tav=ble插件完成表格功能,支持图表排序、滚动等众多功能,上手极其方便。 table表格插件
  • 对页面、图表、表格都进行了封装,用户只需要进行数据组装即可快速完成页面的布局。

UReport的页面

  • 企业微信

  • 企业微信

  • 会员运营

  • 会员运营

  • 会员健康

  • 会员健康

  • 会员服务

  • 会员服务

  • 智慧教育报表中心

  • 智慧教育报表中心

由于其他图表都有对应的插件文件,所以仅对data-progress和text-block封装的参数做说明

  1. 进度条 (data-progress)

    params 类型 说明
    dataType string 不传表示不展示目标值和现在值,传则展示
    expect string 目标值
    now string 现在达成值
    value string 现在达成值/目标值
  2. 文本块 (text-block)

    params 类型 说明
    kind string 表示使用哪种类型的文本块
    background string 背景颜色
    content array 该文本框内文本内容
  • kind目前取值:1,2,3,4,5(注意:content中:文本放text中,数字放value,colortext为文本颜色,colorvalue为数字颜色)
  • 1:分两层,上层纯数字,下纯文字 的排版类型
{
	"kind":1,
	"background":["#3EB2F5","#9374F7"],
	"content":[
		{"text":"","value":"5860","colortext":"","colorvalue":"#fff","size":"44rpx"},
		{"text":"新增微好友","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"}
	]
}
  • 2:分两层,上层文字+数字,下层文字+数字 的排版类型
{
	"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"}
	]
}
  • 3:分三层,上层纯数字,中层纯文字,下层分左右块,左下层文+数,右下层文+数 的排版类型
{
	"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"}
	]
}
  • 4:分三层,上层纯文字,中层纯数字,下层文+数, 的排版类型
{
	"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:分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为当前滚动距离顶部的高度

更多问题查看:秋云图表组件工具 -> 常见问题

后期计划

  • 新增更多报表页面
  • 探索更多datacom的用法使用在qiun-data-charts上

使用手册

uchart官网 table插件使用说明

QQ群

  • 群号:878946748 (进群备注)

Comments ( 20 )

Sign in for post a comment

About

UReport意在打造一套精美的数据报表模板,里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件,用户只需要按照虚拟数据的格式,传特定数据即可方便、快捷地打造出属于自己的报表页面。 spread retract
JavaScript and 3 more languages
MIT
Cancel

Releases

No release

U_REPORT

Contributors

All

Activities

load more
can not load any more