Data report center applet implemented by uni-app

ReportPlus Data Report Center applet

This applet mainly uses the data reporting function implemented by the ucharts and wyb-table plugins. Thanks to the authors Qiuyun and SirW for their excellent open source projects

download link

• Code cloud Gitee open source
• Dcloud plugin market

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

Quick experience

Features

• The most popular chart uCharts plug-in in uni-app is used to complete the chart display. The plug-in has detailed documentation, simple and convenient calling, and excellent performance and experience. ucharts chart plugin .
• Use the wyb-tav=ble plug-in to complete the table function, support chart sorting, scrolling and many other functions, it is extremely convenient to get started. table form plugin
• The pages, charts, and tables are all encapsulated, and users only need to assemble the data to quickly complete the page layout.

ReportPlus page

• Comprehensive report
  

• Member report
  

Since other charts have corresponding plug-in files, only the parameters encapsulated by data-progress and text-block are explained.

1. progress bar (data-progress)

   arams	type	illustrate
   ataType	string	If it is not passed, it means that the target value and current value will not be displayed, and if it is passed, it will be displayed.
   xpect	string	target value
   ow	string	value now
   alue	string	Current Achievement Value/Target Value

2. text-block

   params	type	illustrate
   kind	string	Indicates which type of text block to use
   background	string	background color
   content	array	The content of the text in the text box

• The current value of kind: 1, 2, 3, 4, 5 (Note: in content: text is placed in text, number is placed in value, colortext is the text color, and colorvalue is the number color)
• 1: It is divided into two layers, the upper layer is pure numbers, and the lower layer is pure text typesetting type

{
	"kind":1,
	"background":["#3EB2F5","#9374F7"],
	"content":[
		{"text":"","value":"5860","colortext":"","colorvalue":"#fff","size":"44rpx"},
		{"text":"新增微好友","value":"","colortext":"#fff","colorvalue":"","size":"24rpx"}
	]
}

• 2: Divided into two layers, upper text + numbers, lower text + numbers typesetting type

{
	"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: It is divided into three layers, the upper layer is pure numbers, the middle layer is pure text, the lower layer is divided into left and right blocks, the lower left layer text + number, the lower right layer text + number typesetting type

{
	"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: It is divided into three layers, the upper layer is pure text, the middle layer is pure numbers, the lower layer text + numbers, the typesetting type of

{
	"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: It is divided into 5 layers. For details, please refer to the member operation-active member section

{
	"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"}
	]
},

common problem

Problem 1: The chart occasionally fails to load or directly displays an error page

• Reason: The chart cannot be loaded due to repeated canvasId; the DOM cannot be obtained due to the loss of canvasId;
• Solution: Please be sure to define canvasId on the component, which cannot be a pure number, cannot be a variable, cannot be repeated, and be as long as possible; please check the basic library of the WeChat applet and modify it to 2.16.0 or the latest version of the basic library; please check Whether the parent element or parent component uses v-if to control the display, if so, please change it to v-show, and bind the logic of v-show to the component.

Question 2: Clicking on the chart does not display prompt information or the click position is inaccurate

• Reason: Nested components in components + 2d mode enabled + scroll-view label used in components, making the positioning of the chart inaccurate
• Solution: Add the attributes: inScrollView=”true” :pageScrollTop=”pageScrollTop” :ontouch=”true” , where pageScrollTop is the height of the current scroll from the top

For more questions, see: Qiuyun Chart Component Tool -> Frequently Asked Questions

Later plan

• Add more report pages
• Explore more datacom usage on qiun-data-charts

manual

Instructions for using the table plugin on uchart's official website

QQ group

• Group number: 878946748 (remarks for entering the group)