完成引导页美化,成绩页布局修改与美化,二级页面展示成绩表封装并设计

components/bar-mini-chart/bar-mini-chart.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="chart-container">
+		<view class="chart-name">
+			<view class="t-icon t-icon-xtubiao-12"></view>
+			<text class="chart-name-text">目标成绩</text>
+		</view>
+		
+		<view class="charts-box">
+		  <qiun-data-charts
+		    type="mini-bar"
+		    :chartData="chartData"
+		    :loadingType="4"
+		    background="none"
+				:canvas2d='true' canvasId='canvans999'
+		  />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"bar-mini-chart",
+		data() {
+			return {
+				chartData: {
+					categories: [
+						"数学",
+						"语文",
+						"英语",
+						"体育",
+						"科学",
+						"思品"
+					],
+					series: [{
+							"name": "目标成绩",
+							"data": [
+								97,
+								90,
+								100,
+								95,
+								97,
+								91
+							]
+						},
+						{
+							"name": "近期成绩",
+							"data": [
+								91,
+								92,
+								94,
+								88,
+								82,
+								89
+							]
+						}
+					],
+				},
+				
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+.chart-container {
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		background-color: #FFFFFF;
+		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
+		width: 340rpx;
+
+	
+		.chart-name {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			width: 100%;
+			margin: 20rpx 0 20rpx 40rpx;
+			
+			.chart-name-text {
+				margin-left: 20rpx;
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #3B4144;
+			}
+		}
+	.charts-box{
+		margin: 10rpx 10rpx 0 30rpx;
+		width: 100%;
+		height: 320rpx;
+	}
+}
+.t-icon{
+		width: 40rpx;
+		height: 40rpx;
+	}
+</style>

components/line-mini-chart/line-mini-chart.vue

@@ -2,7 +2,7 @@
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-4"></view>
-			<text class="chart-name-text">总成绩</text>
+			<text class="chart-name-text">对比成绩</text>
 		</view>
 		
 		<view class="charts-box">
@@ -72,13 +72,13 @@
 
 <style lang="scss">
 	.chart-container {
-		border-radius: 10px;
+		border-radius: 20rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 		background-color: #FFFFFF;
-		box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
 		width: 340rpx;
 	
 		.chart-name {
@@ -86,11 +86,11 @@
 			align-items: center;
 			justify-content: flex-start;
 			width: 100%;
-			margin: 10px 0px 10px 20px;
+			margin: 20rpx 0 20rpx 40rpx;
 			
 			.chart-name-text {
-				margin-left: 10px;
-				font-size: 15px;
+				margin-left: 20rpx;
+				font-size: 30rpx;
 				font-weight: bold;
 				color: #3B4144;
 			}
@@ -102,7 +102,7 @@
 	}
 }
 .t-icon{
-		width: 20px;
-		height: 20px;
+		width: 40rpx;
+		height: 40rpx;
 	}
 </style>

components/mainline-mini-chart/mainline-mini-chart.vue

@@ -0,0 +1,82 @@
+<template>
+	<view class="chart-container">
+		<view class="chart-name">
+			<view class="t-icon t-icon-xtubiao-4"></view>
+			<text class="chart-name-text">总成绩</text>
+		</view>
+		
+		<view class="charts-box">
+			<qiun-data-charts class="chart" :canvas2d='true' canvasId='canvans5' type="mainline" :chartData="chartData" :loadingType="4"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"mainline-mini-chart",
+		data() {
+			return {
+				
+				chartData: {
+					categories: [
+						"开学考试",
+						"第一月考",
+						"第二月考",
+						"期中考试",
+						"第三月考",
+						"期末考试"
+					],
+					series: [{
+						"name": "总成绩",
+						"data": [
+							555,
+							577,
+							540,
+							588,
+							563,
+							594
+						]
+					}]
+				},
+				
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+.chart-container {
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		background-color: #FFFFFF;
+		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
+		width: 706rpx;
+	
+		.chart-name {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			width: 100%;
+			margin: 20rpx 0 20rpx 40rpx;
+			
+			.chart-name-text {
+				margin-left: 20rpx;
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #3B4144;
+			}
+		}
+	.charts-box{
+		width: 100%;
+		height:300rpx;
+	}
+}
+.t-icon{
+		width: 40rpx;
+		height: 40rpx;
+	}
+</style>

components/radar-mini-chart/radar-mini-chart.vue

@@ -1,11 +1,19 @@
 <template>
 	<view class="chart-container">
-		
 		<view class="chart-name">
-			<view class="t-icon t-icon-xtubiao-3"></view>
-			<text class="chart-name-text">能力分析</text>
+			<view class="t-icon t-icon-xtubiao-9"></view>
+			<text class="chart-name-text">学年能力</text>
 		</view>
-		
+		
+		<view class="charts-box">
+		  <qiun-data-charts
+		    type="mini-radar"
+		    :chartData="chartData"
+		    :loadingType="4"
+		    background="none"
+				:canvas2d='true' canvasId='canvans998'
+		  />
+		</view>
 	</view>
 </template>
 
@@ -14,6 +22,50 @@
 		name:"radar-mini-chart",
 		data() {
 			return {
+				chartData: {
+					categories: ["语文",
+						"数学",
+						"英语",
+						"科学",
+						"体育",
+						"思品"
+					],
+					series: [{
+							"name": "开学考试",
+							"data": [
+								90,
+								100,
+								77,
+								88,
+								95,
+								85
+							]
+						},
+						{
+							"name": "期中考试",
+							"data": [
+								93,
+								80,
+								99,
+								76,
+								88,
+								100
+							]
+						},
+						{
+							"name": "期末考试",
+							"data": [
+								82,
+								90,
+								65,
+								99,
+								70,
+								92
+							]
+						}
+					],
+				},
+				
 				
 			};
 		}
@@ -23,26 +75,35 @@
 <style lang="scss">
 .chart-container {
 		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
 		background-color: #FFFFFF;
 		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
 		width: 340rpx;
-		height: auto;
+
 	
 		.chart-name {
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
 			width: 100%;
-			margin: 20rpx 0rpx 20rpx 40rpx;
+			margin: 20rpx 0 20rpx 40rpx;
 			
 			.chart-name-text {
-				margin: 26rpx;
+				margin-left: 20rpx;
 				font-size: 30rpx;
 				font-weight: bold;
 				color: #3B4144;
 			}
-		}
+		}
+	.charts-box{
+		margin: 10rpx 0 0 0;
+		width: 100%;
+		height: 320rpx;
 	}
+}
 .t-icon{
 		width: 40rpx;
 		height: 40rpx;

components/rose-mini-chart/rose-mini-chart.vue

@@ -1,50 +0,0 @@
-<template>
-	<view class="chart-container">
-		
-		<view class="chart-name">
-			<view class="t-icon t-icon-xtubiao-"></view>
-			<text class="chart-name-text">偏科分析</text>
-		</view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		name:"rose-mini-chart",
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-.chart-container {
-		border-radius: 20rpx;
-		background-color: #FFFFFF;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
-		width: 340rpx;
-		height: auto;
-	
-		.chart-name {
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			width: 100%;
-			margin: 20rpx 0rpx 20rpx 40rpx;
-			
-			.chart-name-text {
-				margin: 26rpx;
-				font-size: 30rpx;
-				font-weight: bold;
-				color: #3B4144;
-			}
-		}
-	}
-.t-icon{
-		width: 40rpx;
-		height: 40rpx;
-	}
-</style>

components/rpie-mini-chart/rpie-mini-chart.vue

@@ -1,51 +0,0 @@
-<template>
-	<view class="chart-container">
-		
-		<view class="chart-name">
-			<view class="t-icon t-icon-xtubiao-6"></view>
-			<text class="chart-name-text">排名分析</text>
-		</view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		name:"rpie-mini-chart",
-		data() {
-			return {
-				
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-	.chart-container {
-			border-radius: 20rpx;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
-			width: 340rpx;
-			height: auto;
-		
-			.chart-name {
-				display: flex;
-				align-items: center;
-				justify-content: flex-start;
-				width: 100%;
-				margin: 20rpx 0rpx 20rpx 40rpx;
-				
-				.chart-name-text {
-					margin: 26rpx;
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-				}
-			}
-		}
-	.t-icon{
-			width: 40rpx;
-			height: 40rpx;
-		}
-
-</style>

components/top-box/top-box.vue

@@ -9,7 +9,7 @@
 					<text class="detail" @click="select = true">{{semester}}</text>
 					<!-- 选择学期 -->
 					<view class="select-box">
-						<u-picker class="picker" :show="select" :columns="semesterList" ref="uPicker" @confirm="selectSemester" @cancel="selectCancel"></u-picker>
+						<u-picker class="picker" :show="select" :closeOnClickOverlay="true" :columns="semesterList" ref="uPicker" @confirm="selectSemester" @cancel="selectCancel"></u-picker>
 						<view class="t-icon t-icon-youjiantou" @click="select = true"></view>
 					</view>
 				</view>
@@ -63,8 +63,7 @@
 				this.select = false
 			},
 			//取消选择
-			selectCancel(e){
-				console.log('selectCancel',e)
+			selectCancel(){
 				uni.$showMsg('取消选择')
 				this.select = false
 			},
@@ -158,4 +157,7 @@
 			width: 40rpx;
 			height: 40rpx;
 		}
+	.picker{
+		z-index: 99;
+	}
 </style>

gradepkg/area-chart/area-chart.vue

@@ -5,7 +5,7 @@
 			<!-- 选择器 -->
 			<view class="chart-name-btn">
 				<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="confirm" @change="changeHandler"></u-picker>
-				<u-button class="btn" @click="show = true" size="small" shape="circle">科目</u-button>
+				<!-- <u-button class="btn" @click="show = true" size="small" shape="circle">科目</u-button> -->
 			</view>
 		</view>
 		<!-- 图表 -->

components/mainbar-chart/mainbar-chart.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
 	<view class="chart-container">
 		<view class="chart-name">
 			<text class="chart-name-text">成绩目标</text>
@@ -7,14 +7,13 @@
 			<qiun-data-charts type="bar" :canvas2d='true' canvasId='canvans4' 
 			:chartData="chartData" :loadingType="4" background="none" />
 		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "mainbar-chart",
-		data() {
-			return {
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
 				chartData: {
 					categories: [
 						"数学",
@@ -48,43 +47,42 @@
 						}
 					],
 				},
-			};
-		},
-		methods:{
-			
-		}
-	}
-</script>
-
-<style lang="scss">
-	.chart-container {
-		margin: 20px 10px;
-		padding: 7px 7px 7px 2px;
-		border-radius: 15px;
+				
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+.chart-container {
+		margin: 40rpx 20rpx;
+		padding: 14rpx 14rpx 14rpx 4rpx;
+		border-radius: 30rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 		background-color: #FFFFFF;
-		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
 
 		.chart-name {
 			width: 100%;
 			text-align: left;
-			margin-left: 30px;
-			margin-top: 8px;
+			margin-left: 60rpx;
+			margin-top: 16rpx;
 			font-weight: bold;
 			color: #3B4144;
 
 			.chart-name-text {
-				font-size: 13px;
+				font-size: 26rpx;
 			}
 		}
 
 		/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
 		.charts-box {
 			width: 100%;
-			height: 280px;
+			height: 560rpx;
 		}
-	}
+	}
 </style>

gradepkg/line-chart/line-chart.vue

@@ -1,16 +1,21 @@
 <template>
 	<view class="page-box">
 		<view class="icon-box">
-			<view ></view>
+			<view class="t-icon t-icon-xuexirenwu"></view>
+			<view class="t-icon t-icon-ceshi"></view>
+			<view class="t-icon t-icon-silu"></view>
 		</view>
+		
 		<view class="chart-container">
 			<view class="chart-name">
+				<view class="t-icon t-icon-buoumao-haibaoshuangse"></view>
 				<text class="chart-name-text">总成绩对比</text>
 			</view>
 			<view class="charts-box">
 				<qiun-data-charts type="line" :chartData="chartData" :loadingType="4"/>
 			</view>
 		</view>
+		
 	</view>
 </template>
 
@@ -64,35 +69,45 @@
 </script>
 
 <style lang="scss">
+.page-box{
+	height: 400rpx;
+	background: linear-gradient(#5fb7ff, #f1f3f5);
+	.icon-box{
+		display: flex;
+		justify-content: space-between;
+		margin: 0 80rpx 40rpx 80rpx;
+		padding-top: 20rpx;
+	}
 	.chart-container {
-		margin: 20px 10px;
-		padding: 4px 4px 4px 2px;
-		border-radius: 15px;
+		margin: 0 20rpx;
+		padding: 0rpx 10rpx 0rpx 0rpx;
+		border-radius: 15rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-direction: column;
 		background-color: #FFFFFF;
-		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
 	
 		.chart-name {
 			width: 100%;
-			text-align: left;
-			margin-left: 30px;
-			margin-top: 8px;
-			font-weight: bold;
-			color: #3B4144;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			margin-left: 40rpx;
+			margin-top: 20rpx;
 	
 			.chart-name-text {
-				font-size: 13px;
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #3B4144;
+				margin-left: 10rpx;
 			}
 		}
-	
-		/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
 		.charts-box {
 			width: 100%;
-			height: 600rpx;
+			height: 500rpx;
 		}
-	}
-
+	}
+}
 </style>

components/mainradar-chart/mainradar-chart.vue

@@ -1,4 +1,4 @@
-<template>	
+<template>
 	<view class="chart-container">
 		<view class="chart-name">
 			<text class="chart-name-text">成绩雷达图</text>
@@ -7,14 +7,13 @@
 		<view class="charts-box">
 			<qiun-data-charts type="mainradar" :canvas2d='true' canvasId='canvans6' :chartData="chartData" :loadingType="4" background="none" />
 		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "mainradar-chart",
-		data() {
-			return {
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
 				chartData: {
 					categories: ["语文",
 						"数学",
@@ -58,42 +57,44 @@
 						}
 					],
 				},
-			};
-		}
-	}
-</script>
-
-<style lang="scss">
-	.chart-container {
-			margin: 20px 17px;
-			padding: 5px 5px 5px 2px;
-			border-radius: 15px;
+				
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+.chart-container {
+			margin: 40rpx 34rpx;
+			padding: 10rpx 10rpx 10rpx 4rpx;
+			border-radius: 30rpx;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			flex-direction: column;
 			background-color: #FFFFFF;
-			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
 	
 			.chart-name {
 				width: 100%;
 				text-align: left;
-				margin-left: 30px;
-				margin-top: 8px;
+				margin-left: 60rpx;
+				margin-top: 16rpx;
 				font-weight: bold;
 				color: #3B4144;
 				display: flex;
 				justify-content: space-between;
 	
 				.chart-name-text {
-					font-size: 15px;
+					font-size: 30rpx;
 				}
 			}
 			
 	.charts-box{
 		width: 100%;
-		height:300px;
+		height:600rpx;
 	}
 
-}
+}
 </style>

gradepkg/radar-chart/radar-chart.vue

@@ -3,10 +3,10 @@
 		<view class="chart-name">
 			<text class="chart-name-text">单科能力</text>
 			<!-- 选择器 -->
-			<view class="chart-name-btn">
+			<!-- <view class="chart-name-btn">
 				<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="confirm" @change="changeHandler"></u-picker>
 				<u-button class="btn" @click="show = true" size="small" shape="circle">科目</u-button>
-			</view>
+			</view> -->
 		</view>
 		
 		<!-- 图表 -->
@@ -82,26 +82,21 @@
 		justify-content: center;
 		flex-direction: column;
 		background-color: #FFFFFF;
-		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
 
 		.chart-name {
 			width: 100%;
 			text-align: left;
-			margin-left: 30px;
-			margin-top: 8px;
+			margin-left: 60rpx;
+			margin-top: 16rpx;
 			font-weight: bold;
 			color: #3B4144;
 			display: flex;
 			justify-content: space-between;
 
 			.chart-name-text {
-				font-size: 13px;
-				margin-top: 5px;
-			}
-			.chart-name-btn{
-				width: 50px;
-				font-size: 13px;
-				margin:0 33px 0 0;
+				font-size: 26rpx;
+				margin-top: 10rpx;
 			}
 		}
 

pages.json

@@ -75,7 +75,8 @@
 			"path": "line-chart/line-chart",
 			"style": {
 				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor":"#5fb7ff"
 			}
 
 		}, {
@@ -92,16 +93,28 @@
 				"enablePullDownRefresh": false
 			}
 
-		}    ,{
-                    "path" : "arcbar-chart/arcbar-chart",
-                    "style" :                                                                                    
-                {
-                    "navigationBarTitleText": "",
-                    "enablePullDownRefresh": false
-                }
-                
-                }
-            ]
+		}, {
+			"path": "arcbar-chart/arcbar-chart",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "bar-chart/bar-chart",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "mainradar-chart/mainradar-chart",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}]
 	}],
 	"preloadRule": {
 		"subpkg/login/login": {

pages/approval/approval.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <!-- <view class="container">
 		<top-box></top-box>
     <view class="u-demo-block">
       <text class="u-demo-block__title"></text>
@@ -28,7 +28,7 @@
         </view>
       </view>
     </view>
-  </view>
+  </view> -->
 </template>
 
 <script>
@@ -36,19 +36,19 @@
     export default {
         data() {
             return {
-                albumWidth: 0,
-                urls2: [
-                    'https://cdn.uviewui.com/uview/album/1.jpg',
-                    'https://cdn.uviewui.com/uview/album/2.jpg',
-                    'https://cdn.uviewui.com/uview/album/3.jpg',
-                    'https://cdn.uviewui.com/uview/album/4.jpg',
-                    'https://cdn.uviewui.com/uview/album/5.jpg',
-                    'https://cdn.uviewui.com/uview/album/6.jpg',
-                    'https://cdn.uviewui.com/uview/album/7.jpg',
-                    'https://cdn.uviewui.com/uview/album/8.jpg',
-                    'https://cdn.uviewui.com/uview/album/9.jpg',
-                    'https://cdn.uviewui.com/uview/album/10.jpg',
-                ],
+                // albumWidth: 0,
+                // urls2: [
+                //     'https://cdn.uviewui.com/uview/album/1.jpg',
+                //     'https://cdn.uviewui.com/uview/album/2.jpg',
+                //     'https://cdn.uviewui.com/uview/album/3.jpg',
+                //     'https://cdn.uviewui.com/uview/album/4.jpg',
+                //     'https://cdn.uviewui.com/uview/album/5.jpg',
+                //     'https://cdn.uviewui.com/uview/album/6.jpg',
+                //     'https://cdn.uviewui.com/uview/album/7.jpg',
+                //     'https://cdn.uviewui.com/uview/album/8.jpg',
+                //     'https://cdn.uviewui.com/uview/album/9.jpg',
+                //     'https://cdn.uviewui.com/uview/album/10.jpg',
+                // ],
             }
         },
 				computed:{
@@ -58,30 +58,30 @@
 </script>
 
 <style lang="scss">
-	.container{
-		height: 100%;
-		.home-topinfo{
-			background: linear-gradient(#ff5959, #f1f3f5);
-		}
-		.u-demo-block{
-			margin-left: 34rpx;
-			margin-top: -30rpx;
-		}
-		.album {
-        @include flex;
-        align-items: flex-start;
+	// .container{
+	// 	height: 100%;
+	// 	.home-topinfo{
+	// 		background: linear-gradient(#ff5959, #f1f3f5);
+	// 	}
+	// 	.u-demo-block{
+	// 		margin-left: 34rpx;
+	// 		margin-top: -30rpx;
+	// 	}
+	// 	.album {
+ //        @include flex;
+ //        align-items: flex-start;
 
-        &__avatar {
-             background-color: $u-bg-color;
-             padding: 10rpx;
-             border-radius: 6rpx;
-         }
+ //        &__avatar {
+ //             background-color: $u-bg-color;
+ //             padding: 10rpx;
+ //             border-radius: 6rpx;
+ //         }
     
-        &__content {
-             margin-left: 20rpx;
-             flex: 1;
-         }
-    }
-	}
+ //        &__content {
+ //             margin-left: 20rpx;
+ //             flex: 1;
+ //         }
+ //    }
+	// }
     
 </style>

pages/grade/grade.vue

@@ -5,6 +5,11 @@
 		
 		<!-- 缩略图区域 -->
 		<view class="mini-chart-list">
+			
+			<view class="mini-chart-item" @click="navMainLineChart">
+				<mainline-mini-chart></mainline-mini-chart>
+			</view>
+			
 			<view class="mini-chart-item" @click="navLineChart">
 				<line-mini-chart></line-mini-chart>
 			</view>
@@ -16,28 +21,63 @@
 			<view class="mini-chart-item" @click="navColumnChart">
 				<column-mini-chart></column-mini-chart>
 			</view>
+			
 			<!-- 按钮区域 -->
 			<view class="mini-chart-item">
 				<view class="item-i" @click="navRoseChart">
-					<rose-mini-chart></rose-mini-chart>
+					<view class="item-container">
+						<view class="chart-name">
+							<view class="t-icon t-icon-xtubiao-"></view>
+							<text class="chart-name-text">科目分析</text>
+						</view>
+					</view>
 				</view>
 				
 				<view class="item-i" @click="navRadarChart">
-					<radar-mini-chart></radar-mini-chart>
+					<view class="item-container">
+						<view class="chart-name">
+							<view class="t-icon t-icon-xtubiao-3"></view>
+							<text class="chart-name-text">能力分析</text>
+						</view>
+					</view>
 				</view>
 				
 				<view class="item-i" @click="navArcbarChart">
-					<rpie-mini-chart></rpie-mini-chart>
+					<view class="item-container">
+						<view class="chart-name">
+							<view class="t-icon t-icon-xtubiao-6"></view>
+							<text class="chart-name-text">排名分析</text>
+						</view>
+					</view>
 				</view>
 			</view>
 			
 			
+			<view class="mini-chart-item" @click="navMainRadarChart">
+				<radar-mini-chart></radar-mini-chart>
+				
+				<!-- <view class="item-i" @click="navArcbarChart">
+					<view class="item-container">
+						<view class="chart-name">
+							<view class="t-icon t-icon-xtubiao-6"></view>
+							<text class="chart-name-text">排名分析</text>
+						</view>
+					</view>
+				</view> -->
+				
+			</view>
+			
+			<view class="mini-chart-item" @click="navBarChart">
+				<bar-mini-chart></bar-mini-chart>
+			</view>
+				
 		</view>
-		
-		<view class="chart-card">
-			<mainbar-chart></mainbar-chart>
+			
+			
+			
+			
+			
 		</view>
-		
 	</view>
 </template>
 
@@ -90,12 +130,27 @@
 					url:"/gradepkg/radar-chart/radar-chart"
 				})
 			},
+			//导航到进度条页面
 			navArcbarChart(e){
 				console.log(e);
 				uni.navigateTo({
 					url:"/gradepkg/arcbar-chart/arcbar-chart"
 				})
 			},
+			//导航到条状图页
+			navBarChart(e){
+				console.log(e);
+				uni.navigateTo({
+					url:"/gradepkg/bar-chart/bar-chart"
+				})
+			},
+			//导航到学年雷达图页
+			navMainRadarChart(e){
+				console.log(e);
+				uni.navigateTo({
+					url:"/gradepkg/mainradar-chart/mainradar-chart"
+				})
+			}
 			
 		},
 		onLoad(){
@@ -117,20 +172,42 @@
 			justify-content: center;
 			align-items: center;
 			flex-wrap: wrap;
-			margin: -50px 11px 0 11px;
+			margin: -100rpx 22rpx 0 22rpx;
 			justify-content: space-between;
+			
 			.mini-chart-item{
-				margin-top: 11px;
+				margin-top: 22rpx;
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
 				.item-i{
-					margin: -5px 0px;
+					margin: -10rpx 0;
+					.item-container{
+						border-radius: 20rpx;
+						background-color: #FFFFFF;
+						box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
+						width: 340rpx;
+						height: auto;
+						.chart-name {
+							display: flex;
+							align-items: center;
+							justify-content: flex-start;
+							width: 100%;
+							margin: 20rpx 0rpx 20rpx 40rpx;
+							.chart-name-text {
+								margin: 26rpx;
+								font-size: 30rpx;
+								font-weight: bold;
+								color: #3B4144;
+							}
+						}
+					}
+				.t-icon{
+						width: 40rpx;
+						height: 40rpx;
 				}
 			}
 		}
 	}
-	.chart-card{
-		
-	}
+}
 </style>

pages/home/home.vue

@@ -18,25 +18,6 @@
 			<z-table class="table" :tableData="tableData" :columns="columns" stickSide="true" showBottomSum="true"></z-table>
 		</view>
 		
-		<mainradar-chart></mainradar-chart>
-		<!-- 卡片区域 -->
-		<view class="home-card">
-			<view class="card-edit">
-				<text class="card-title">学期计划</text>
-				<button class="card-button" @click="submitInputValue">修改计划</button>
-			</view>		
-			<text class="card-content">{{inputvalue}}</text>
-			<!-- <u--textarea class="card-input" autoHeight v-model="inputvalue"></u--textarea>	 -->
-		</view>
-		
-		<!-- 目标图表 -->
-		<view class="chart-card">
-			<mainbar-chart class="home-bar-chart"></mainbar-chart>
-		</view>
-		
-		
-
-		
 
 	</view>
 	</view>
@@ -48,9 +29,7 @@
 	export default {
 		data() {
 			return {
-				active: 0,
-				notification: '这里是滚动条的内容，显示重要通知等等消息',
-				inputvalue: '孩子学期计划',				
+				notification: '这里是滚动条的内容，显示重要通知等等消息',		
 				
 				tableData: [
 				{
@@ -123,10 +102,7 @@
 		
 		methods: {
 			
-			//提交计划
-			submitInputValue(e){
-				
-			}
+			
 		},
 	}
 </script>
@@ -137,12 +113,12 @@
 
 		.main-chart{
 			width: 100%;
-			margin-top: -30px;
+			margin-top: -60rpx;
 		}
 		
 
 		.steps-box {
-			margin: -55px 17px 10px 17px;
+			margin: -110rpx 34rpx 20rpx 34rpx;
 		}
 		.notice{
 			margin: -5px 17px 10px 17px;
@@ -190,14 +166,6 @@
 				color: #3B4144;
 			}
 		}
-
-		.chart-card {
-			margin: 0 7px 7px 7px;
-
-			.home-bar-chart {
-				margin-top: 45px
-			}
-		}
 		.table-card{
 			margin: 20px 17px;
 			border-radius: 8px;

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -51,17 +51,14 @@ const formatDateTime = (timeStamp, returnType) => {
 
 const cfu = {
 	//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
-	"type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar",
-		"gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype", "mainline", "mainradar",
-		"mini-line", "mini-area", "mini-column","mini-rose"
+	"type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar","gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype", "mainline", "mainradar",
+"mini-line", "mini-area", "mini-column", "mini-rose", "mini-bar", "mini-radar"
 	],
-	"range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图",
-		"混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型", "首页趋势图", "首页雷达图", "折线缩略图", "区域缩略图", "柱状缩略图", "玫瑰缩略图"
+	"range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图","混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型", "首页趋势图", "首页雷达图", "折线缩略图", "区域缩略图", "柱状缩略图", "玫瑰缩略图", "条状图缩略图", "雷达缩略图"
 	],
 	//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
 	//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
-	"categories": ["line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "demotype", "mainline",
-		"mainradar", "mini-line", "mini-area", "mini-column",
+	"categories": ["line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "demotype", "mainline", "mainradar", "mini-line", "mini-area", "mini-column", "mini-bar", "mini-radar"
 	],
 	//instance为实例变量承载属性，不要删除
 	"instance": {},
@@ -119,153 +116,153 @@ const cfu = {
 		}
 	},
 	//下面是自定义配置，请添加项目所需的通用配置
-	"rose":{
-	    "type": "rose",
-	    "canvasId": "",
-	    "canvas2d": false,
-	    "background": "none",
-	    "animation": true,
-	    "timing": "easeOut",
-	    "duration": 1000,
-	    "color": [
-	        "#0052d4",
-	        "#ff5959",
-	        "#f9b248",
-	        "#3CA272",
-	        "#73C0DE",
-	        "#ff55a3"
-	    ],
-	    "padding": [
-	        5,
-	        5,
-	        5,
-	        5
-	    ],
-	    "rotate": false,
-	    "errorReload": true,
-	    "fontSize": 13,
-	    "fontColor": "#666666",
-	    "enableScroll": false,
-	    "touchMoveLimit": 60,
-	    "enableMarkLine": false,
-	    "dataLabel": false,
-	    "dataPointShape": false,
-	    "dataPointShapeType": "hollow",
-	    "tapLegend": true,
-	    "legend": {
-	        "show": true,
-	        "position": "bottom",
-	        "float": "center",
-	        "padding": 5,
-	        "margin": 5,
-	        "backgroundColor": "rgba(0,0,0,0)",
-	        "borderColor": "rgba(0,0,0,0)",
-	        "borderWidth": 0,
-	        "fontSize": 13,
-	        "fontColor": "#666666",
-	        "lineHeight": 25,
-	        "hiddenColor": "#CECECE",
-	        "itemGap": 10
-	    },
-	    "extra": {
-	        "rose": {
-	            "type": "radius",
-	            "minRadius": 50,
-	            "activeOpacity": 0.5,
-	            "activeRadius": 10,
-	            "offsetAngle": 0,
-	            "labelWidth": 15,
-	            "border": true,
-	            "borderWidth": 2,
-	            "borderColor": "#FFFFFF",
-	            "linearType": "none"
-	        },
-	        "tooltip": {
-	            "showBox": true,
-	            "showArrow": false,
-	            "showCategory": false,
-	            "borderWidth": 0,
-	            "borderRadius": 6,
-	            "borderColor": "#000000",
-	            "borderOpacity": 0.5,
-	            "bgColor": "#000000",
-	            "bgOpacity": 0.5,
-	            "gridType": "solid",
-	            "dashLength": 4,
-	            "gridColor": "#CCCCCC",
-	            "fontColor": "#FFFFFF",
-	            "splitLine": true,
-	            "horizentalLine": false,
-	            "xAxisLabel": false,
-	            "yAxisLabel": false,
-	            "labelBgColor": "#FFFFFF",
-	            "labelBgOpacity": 0.7,
-	            "labelFontColor": "#666666"
-	        }
-	    }
+	"rose": {
+		"type": "rose",
+		"canvasId": "",
+		"canvas2d": false,
+		"background": "none",
+		"animation": true,
+		"timing": "easeOut",
+		"duration": 1000,
+		"color": [
+			"#0052d4",
+			"#ff5959",
+			"#f9b248",
+			"#3CA272",
+			"#73C0DE",
+			"#ff55a3"
+		],
+		"padding": [
+			5,
+			5,
+			5,
+			5
+		],
+		"rotate": false,
+		"errorReload": true,
+		"fontSize": 13,
+		"fontColor": "#666666",
+		"enableScroll": false,
+		"touchMoveLimit": 60,
+		"enableMarkLine": false,
+		"dataLabel": false,
+		"dataPointShape": false,
+		"dataPointShapeType": "hollow",
+		"tapLegend": true,
+		"legend": {
+			"show": true,
+			"position": "bottom",
+			"float": "center",
+			"padding": 5,
+			"margin": 5,
+			"backgroundColor": "rgba(0,0,0,0)",
+			"borderColor": "rgba(0,0,0,0)",
+			"borderWidth": 0,
+			"fontSize": 13,
+			"fontColor": "#666666",
+			"lineHeight": 25,
+			"hiddenColor": "#CECECE",
+			"itemGap": 10
+		},
+		"extra": {
+			"rose": {
+				"type": "radius",
+				"minRadius": 50,
+				"activeOpacity": 0.5,
+				"activeRadius": 10,
+				"offsetAngle": 0,
+				"labelWidth": 15,
+				"border": true,
+				"borderWidth": 2,
+				"borderColor": "#FFFFFF",
+				"linearType": "none"
+			},
+			"tooltip": {
+				"showBox": true,
+				"showArrow": false,
+				"showCategory": false,
+				"borderWidth": 0,
+				"borderRadius": 6,
+				"borderColor": "#000000",
+				"borderOpacity": 0.5,
+				"bgColor": "#000000",
+				"bgOpacity": 0.5,
+				"gridType": "solid",
+				"dashLength": 4,
+				"gridColor": "#CCCCCC",
+				"fontColor": "#FFFFFF",
+				"splitLine": true,
+				"horizentalLine": false,
+				"xAxisLabel": false,
+				"yAxisLabel": false,
+				"labelBgColor": "#FFFFFF",
+				"labelBgOpacity": 0.7,
+				"labelFontColor": "#666666"
+			}
+		}
 	},
-	"arcbar":{
-	    "type": "arcbar",
-	    "canvasId": "",
-	    "canvas2d": false,
-	    "background": "none",
-	    "animation": true,
-	    "timing": "easeOut",
-	    "duration": 3000,
-	    "color": [
-	        "#1890FF",
-	        "#91CB74",
-	        "#FAC858",
-	        "#EE6666",
-	        "#73C0DE",
-	        "#3CA272",
-	        "#FC8452",
-	        "#9A60B4",
-	        "#ea7ccc"
-	    ],
-	    "rotate": false,
-	    "errorReload": true,
-	    "fontSize": 13,
-	    "fontColor": "#666666",
-	    "enableScroll": false,
-	    "touchMoveLimit": 60,
-	    "enableMarkLine": false,
-	    "dataLabel": true,
-	    "dataPointShape": true,
-	    "dataPointShapeType": "solid",
-	    "tapLegend": true,
-	    "title": {
-	        "name": "百分比",
-	        "fontSize": 25,
-	        "color": "#65c7f7",
-	        "offsetX": 0,
-	        "offsetY": 0
-	    },
-	    "subtitle": {
-	        "name": "默认标题",
-	        "fontSize": 15,
-	        "color": "#666666",
-	        "offsetX": 0,
-	        "offsetY": 0
-	    },
-	    "extra": {
-	        "arcbar": {
-	            "type": "default",
-	            "width": 16,
-	            "backgroundColor": "#E9E9E9",
-	            "startAngle": 0.75,
-	            "endAngle": 0.25,
-	            "gap": 2,
-	            "centerX": 0,
-	            "centerY": 0,
-	            "linearType": "custom",
-	            "customColor": [
-	                "#65c7f7",
-	                "#f16529",
-	                "#ffcc33"
-	            ]
-	        }
-	    }
+	"arcbar": {
+		"type": "arcbar",
+		"canvasId": "",
+		"canvas2d": false,
+		"background": "none",
+		"animation": true,
+		"timing": "easeOut",
+		"duration": 3000,
+		"color": [
+			"#1890FF",
+			"#91CB74",
+			"#FAC858",
+			"#EE6666",
+			"#73C0DE",
+			"#3CA272",
+			"#FC8452",
+			"#9A60B4",
+			"#ea7ccc"
+		],
+		"rotate": false,
+		"errorReload": true,
+		"fontSize": 13,
+		"fontColor": "#666666",
+		"enableScroll": false,
+		"touchMoveLimit": 60,
+		"enableMarkLine": false,
+		"dataLabel": true,
+		"dataPointShape": true,
+		"dataPointShapeType": "solid",
+		"tapLegend": true,
+		"title": {
+			"name": "百分比",
+			"fontSize": 25,
+			"color": "#65c7f7",
+			"offsetX": 0,
+			"offsetY": 0
+		},
+		"subtitle": {
+			"name": "默认标题",
+			"fontSize": 15,
+			"color": "#666666",
+			"offsetX": 0,
+			"offsetY": 0
+		},
+		"extra": {
+			"arcbar": {
+				"type": "default",
+				"width": 16,
+				"backgroundColor": "#E9E9E9",
+				"startAngle": 0.75,
+				"endAngle": 0.25,
+				"gap": 2,
+				"centerX": 0,
+				"centerY": 0,
+				"linearType": "custom",
+				"customColor": [
+					"#65c7f7",
+					"#f16529",
+					"#ffcc33"
+				]
+			}
+		}
 	},
 	"line": {
 		"type": "line",
@@ -307,7 +304,7 @@ const cfu = {
 			"rotateLabel": false,
 			"labelCount": 6,
 			"itemCount": 5,
-			"boundaryGap": "justify",
+			"boundaryGap": "center",
 			"disableGrid": true,
 			"gridColor": "#696969",
 			"gridType": "solid",
@@ -323,7 +320,7 @@ const cfu = {
 			"disabled": false,
 			"disableGrid": false,
 			"splitNumber": 5,
-			"gridType": "dash",
+			"gridType": "solid",
 			"dashLength": 10,
 			"gridColor": "#CCCCCC",
 			"padding": 10,
@@ -360,7 +357,7 @@ const cfu = {
 				"borderOpacity": 0.5,
 				"bgColor": "#000000",
 				"bgOpacity": 0.5,
-				"gridType": "dash",
+				"gridType": "solid",
 				"dashLength": 8,
 				"gridColor": "#CCCCCC",
 				"fontColor": "#FFFFFF",
@@ -422,7 +419,7 @@ const cfu = {
 			"boundaryGap": "center",
 			"disableGrid": true,
 			"gridColor": "#696969",
-			"gridType": "dash",
+			"gridType": "solid",
 			"dashLength": 4,
 			"gridEval": 1,
 			"scrollShow": false,
@@ -435,7 +432,7 @@ const cfu = {
 			"disabled": false,
 			"disableGrid": false,
 			"splitNumber": 5,
-			"gridType": "dash",
+			"gridType": "solid",
 			"dashLength": 10,
 			"gridColor": "#CCCCCC",
 			"padding": 10,
@@ -495,7 +492,7 @@ const cfu = {
 				"borderOpacity": 0.5,
 				"bgColor": "#000000",
 				"bgOpacity": 0.5,
-				"gridType": "dash",
+				"gridType": "solid",
 				"dashLength": 8,
 				"gridColor": "#CCCCCC",
 				"fontColor": "#FFFFFF",
@@ -524,39 +521,39 @@ const cfu = {
 		"duration": 1000,
 		"color": [
 			"#0052d4",
-			"#20a162"
+			"#ff5959"
 		],
 		"padding": [
 			1,
-			18,
+			15,
 			3,
 			3
 		],
 		"rotate": false,
 		"errorReload": true,
 		"fontSize": 13,
-		"fontColor": "#696969",
+		"fontColor": "#666666",
 		"enableScroll": false,
 		"touchMoveLimit": 60,
 		"enableMarkLine": false,
 		"dataLabel": false,
-		"dataPointShape": true,
+		"dataPointShape": false,
 		"dataPointShapeType": "solid",
 		"tapLegend": true,
 		"xAxis": {
 			"disabled": false,
-			"axisLine": false,
+			"axisLine": true,
 			"axisLineColor": "#CCCCCC",
 			"calibration": false,
-			"fontColor": "#696969",
-			"fontSize": 12,
+			"fontColor": "#666666",
+			"fontSize": 13,
 			"rotateLabel": false,
 			"itemCount": 5,
 			"boundaryGap": "justify",
 			"disableGrid": false,
 			"gridColor": "#CCCCCC",
-			"gridType": "dash",
-			"dashLength": 8,
+			"gridType": "solid",
+			"dashLength": 4,
 			"gridEval": 1,
 			"scrollShow": false,
 			"scrollAlign": "left",
@@ -569,7 +566,7 @@ const cfu = {
 			"disabled": false,
 			"disableGrid": false,
 			"splitNumber": 5,
-			"gridType": "dash",
+			"gridType": "solid",
 			"dashLength": 8,
 			"gridColor": "#CCCCCC",
 			"padding": 10,
@@ -585,27 +582,27 @@ const cfu = {
 			"backgroundColor": "rgba(0,0,0,0)",
 			"borderColor": "rgba(0,0,0,0)",
 			"borderWidth": 0,
-			"fontSize": 12,
-			"fontColor": "#696969",
-			"lineHeight": 10,
+			"fontSize": 13,
+			"fontColor": "#666666",
+			"lineHeight": 11,
 			"hiddenColor": "#CECECE",
 			"itemGap": 10
 		},
 		"extra": {
 			"bar": {
 				"type": "group",
-				"width": 14,
+				"width": 30,
 				"seriesGap": 2,
-				"categoryGap": 4,
-				"barBorderCircle": false,
+				"categoryGap": 3,
+				"barBorderCircle": true,
 				"barBorderRadius": [
-					3,
-					10,
-					3,
-					3
+					15,
+					15,
+					15,
+					15
 				],
-				"linearType": "none",
-				"linearOpacity": 1,
+				"linearType": "opacity",
+				"linearOpacity": 0.8,
 				"colorStop": 0,
 				"activeBgColor": "#000000",
 				"activeBgOpacity": 0.08,
@@ -617,7 +614,7 @@ const cfu = {
 				"showArrow": false,
 				"showCategory": false,
 				"borderWidth": 0,
-				"borderRadius": 6,
+				"borderRadius": 5,
 				"borderColor": "#000000",
 				"borderOpacity": 0.5,
 				"bgColor": "#000000",
@@ -631,7 +628,7 @@ const cfu = {
 				"xAxisLabel": false,
 				"yAxisLabel": false,
 				"labelBgColor": "#FFFFFF",
-				"labelBgOpacity": 0.7,
+				"labelBgOpacity": 0.5,
 				"labelFontColor": "#666666"
 			},
 			"markLine": {
@@ -697,7 +694,7 @@ const cfu = {
 			"disabled": false,
 			"disableGrid": false,
 			"splitNumber": 5,
-			"gridType": "dash",
+			"gridType": "solid",
 			"dashLength": 10,
 			"gridColor": "#CCCCCC",
 			"padding": 10,
@@ -737,7 +734,7 @@ const cfu = {
 				"borderOpacity": 0.5,
 				"bgColor": "#000000",
 				"bgOpacity": 0.5,
-				"gridType": "dash",
+				"gridType": "solid",
 				"dashLength": 8,
 				"gridColor": "#CCCCCC",
 				"fontColor": "#FFFFFF",
@@ -849,9 +846,9 @@ const cfu = {
 		],
 		"padding": [
 			5,
+			-15,
 			0,
-			0,
-			0
+			-15
 		],
 		"rotate": false,
 		"errorReload": true,
@@ -1387,91 +1384,299 @@ const cfu = {
 			}
 		}
 	},
-	"mini-rose":{
-    "type": "rose",
-    "canvasId": "",
-    "canvas2d": false,
-    "background": "none",
-    "animation": true,
-    "timing": "easeOut",
-    "duration": 1000,
-    "color": [
-        "#0052d4",
-        "#ff5959",
-        "#f9b248",
-        "#3CA272",
-        "#73C0DE",
-        "#ff55a3"
-    ],
-    "padding": [
-        5,
-        5,
-        5,
-        5
-    ],
-    "rotate": false,
-    "errorReload": true,
-    "fontSize": 13,
-    "fontColor": "#666666",
-    "enableScroll": false,
-    "touchMoveLimit": 60,
-    "enableMarkLine": false,
-    "dataLabel": false,
-    "dataPointShape": false,
-    "dataPointShapeType": "hollow",
-    "tapLegend": false,
-    "legend": {
-        "show": false,
-        "position": "bottom",
-        "float": "center",
-        "padding": 5,
-        "margin": 5,
-        "backgroundColor": "rgba(0,0,0,0)",
-        "borderColor": "rgba(0,0,0,0)",
-        "borderWidth": 0,
-        "fontSize": 13,
-        "fontColor": "#666666",
-        "lineHeight": 25,
-        "hiddenColor": "#CECECE",
-        "itemGap": 10
-    },
-    "extra": {
-        "rose": {
-            "type": "radius",
-            "minRadius": 50,
-            "activeOpacity": 0.5,
-            "activeRadius": 10,
-            "offsetAngle": 0,
-            "labelWidth": 15,
-            "border": true,
-            "borderWidth": 2,
-            "borderColor": "#FFFFFF",
-            
-        },
-        "tooltip": {
-            "showBox": true,
-            "showArrow": false,
-            "showCategory": false,
-            "borderWidth": 0,
-            "borderRadius": 6,
-            "borderColor": "#000000",
-            "borderOpacity": 0.5,
-            "bgColor": "#000000",
-            "bgOpacity": 0.5,
-            "gridType": "solid",
-            "dashLength": 4,
-            "gridColor": "#CCCCCC",
-            "fontColor": "#FFFFFF",
-            "splitLine": true,
-            "horizentalLine": false,
-            "xAxisLabel": false,
-            "yAxisLabel": false,
-            "labelBgColor": "#FFFFFF",
-            "labelBgOpacity": 0.7,
-            "labelFontColor": "#666666"
-        }
-    }
-}
+	"mini-rose": {
+		"type": "rose",
+		"canvasId": "",
+		"canvas2d": false,
+		"background": "none",
+		"animation": true,
+		"timing": "easeOut",
+		"duration": 1000,
+		"color": [
+			"#0052d4",
+			"#ff5959",
+			"#f9b248",
+			"#3CA272",
+			"#73C0DE",
+			"#ff55a3"
+		],
+		"padding": [
+			5,
+			5,
+			5,
+			5
+		],
+		"rotate": false,
+		"errorReload": true,
+		"fontSize": 13,
+		"fontColor": "#666666",
+		"enableScroll": false,
+		"touchMoveLimit": 60,
+		"enableMarkLine": false,
+		"dataLabel": false,
+		"dataPointShape": false,
+		"dataPointShapeType": "hollow",
+		"tapLegend": false,
+		"legend": {
+			"show": false,
+			"position": "bottom",
+			"float": "center",
+			"padding": 5,
+			"margin": 5,
+			"backgroundColor": "rgba(0,0,0,0)",
+			"borderColor": "rgba(0,0,0,0)",
+			"borderWidth": 0,
+			"fontSize": 13,
+			"fontColor": "#666666",
+			"lineHeight": 25,
+			"hiddenColor": "#CECECE",
+			"itemGap": 10
+		},
+		"extra": {
+			"rose": {
+				"type": "radius",
+				"minRadius": 50,
+				"activeOpacity": 0.5,
+				"activeRadius": 10,
+				"offsetAngle": 0,
+				"labelWidth": 15,
+				"border": true,
+				"borderWidth": 2,
+				"borderColor": "#FFFFFF",
+
+			},
+			"tooltip": {
+				"showBox": true,
+				"showArrow": false,
+				"showCategory": false,
+				"borderWidth": 0,
+				"borderRadius": 6,
+				"borderColor": "#000000",
+				"borderOpacity": 0.5,
+				"bgColor": "#000000",
+				"bgOpacity": 0.5,
+				"gridType": "solid",
+				"dashLength": 4,
+				"gridColor": "#CCCCCC",
+				"fontColor": "#FFFFFF",
+				"splitLine": true,
+				"horizentalLine": false,
+				"xAxisLabel": false,
+				"yAxisLabel": false,
+				"labelBgColor": "#FFFFFF",
+				"labelBgOpacity": 0.7,
+				"labelFontColor": "#666666"
+			}
+		}
+	},
+	"mini-bar": {
+		"type": "bar",
+		"canvasId": "",
+		"canvas2d": false,
+		"background": "none",
+		"animation": true,
+		"timing": "easeOut",
+		"duration": 1000,
+		"color": [
+			"#0052d4",
+			"#ff5959"
+		],
+		"padding": [
+			0,
+			15,
+			-10,
+			5
+		],
+		"rotate": false,
+		"errorReload": true,
+		"fontSize": 13,
+		"fontColor": "#666666",
+		"enableScroll": false,
+		"touchMoveLimit": 60,
+		"enableMarkLine": false,
+		"dataLabel": false,
+		"dataPointShape": false,
+		"dataPointShapeType": "solid",
+		"tapLegend": true,
+		"xAxis": {
+			"disabled": true,
+			"axisLine": false,
+			"axisLineColor": "#CCCCCC",
+			"calibration": false,
+			"fontColor": "#666666",
+			"fontSize": 13,
+			"rotateLabel": false,
+			"itemCount": 5,
+			"boundaryGap": "justify",
+			"disableGrid": true,
+			"gridColor": "#CCCCCC",
+			"gridType": "solid",
+			"dashLength": 4,
+			"gridEval": 1,
+			"scrollShow": false,
+			"scrollAlign": "left",
+			"scrollColor": "#A6A6A6",
+			"scrollBackgroundColor": "#EFEBEF",
+			"min": 0,
+			"format": ""
+		},
+		"yAxis": {
+			"disabled": true,
+			"disableGrid": true,
+			"splitNumber": 5,
+			"gridType": "solid",
+			"dashLength": 8,
+			"gridColor": "#CCCCCC",
+			"padding": 10,
+			"showTitle": false,
+			"data": []
+		},
+		"legend": {
+			"show": false,
+			"position": "bottom",
+			"float": "center",
+			"padding": 5,
+			"margin": 5,
+			"backgroundColor": "rgba(0,0,0,0)",
+			"borderColor": "rgba(0,0,0,0)",
+			"borderWidth": 0,
+			"fontSize": 13,
+			"fontColor": "#666666",
+			"lineHeight": 11,
+			"hiddenColor": "#CECECE",
+			"itemGap": 10
+		},
+		"extra": {
+			"bar": {
+				"type": "group",
+				"width": 10,
+				"seriesGap": 2,
+				"categoryGap": 3,
+				"barBorderCircle": false,
+				"barBorderRadius": [
+					10,
+					10,
+					10,
+					10
+				],
+				"linearType": "opacity",
+				"linearOpacity": 0.7,
+				"colorStop": 0,
+				"activeBgColor": "#FFFFFF",
+				"activeBgOpacity": 0,
+				"meterBorde": 1,
+				"meterFillColor": "#FFFFFF"
+			},
+			"tooltip": {
+				"showBox": false,
+				"showArrow": false,
+				"showCategory": false,
+				"borderWidth": 0,
+				"borderRadius": 0,
+				"borderColor": "#000000",
+				"borderOpacity": 0.7,
+				"bgColor": "#000000",
+				"bgOpacity": 0.7,
+				"gridType": "solid",
+				"dashLength": 4,
+				"gridColor": "#CCCCCC",
+				"fontColor": "#FFFFFF",
+				"splitLine": true,
+				"horizentalLine": false,
+				"xAxisLabel": false,
+				"yAxisLabel": false,
+				"labelBgColor": "#FFFFFF",
+				"labelBgOpacity": 0.7,
+				"labelFontColor": "#666666"
+			},
+			"markLine": {
+				"type": "solid",
+				"dashLength": 4,
+				"data": []
+			}
+		}
+	},
+	"mini-radar":{
+	    "type": "radar",
+	    "canvasId": "",
+	    "canvas2d": false,
+	    "background": "none",
+	    "animation": true,
+	    "timing": "easeOut",
+	    "duration": 1000,
+	    "color": [
+	        "#0052d4",
+	        "#ff5959",
+	        "#f9b248"
+	    ],
+	    "padding": [
+	        -40,
+	        -35,
+	        -35,
+	        -35
+	    ],
+	    "rotate": false,
+	    "errorReload": true,
+	    "fontSize": 13,
+	    "fontColor": "#666666",
+	    "enableScroll": false,
+	    "touchMoveLimit": 60,
+	    "enableMarkLine": false,
+	    "dataLabel": false,
+	    "dataPointShape": false,
+	    "dataPointShapeType": "solid",
+	    "tapLegend": true,
+	    "legend": {
+	        "show": false,
+	        "position": "right",
+	        "float": "center",
+	        "padding": 5,
+	        "margin": 5,
+	        "backgroundColor": "rgba(0,0,0,0)",
+	        "borderColor": "rgba(0,0,0,0)",
+	        "borderWidth": 0,
+	        "fontSize": 13,
+	        "fontColor": "#666666",
+	        "lineHeight": 25,
+	        "hiddenColor": "#CECECE",
+	        "itemGap": 10
+	    },
+	    "extra": {
+	        "radar": {
+	            "gridType": "radar",
+	            "gridColor": "#FFFFFF",
+	            "gridCount": 3,
+	            "labelColor": "#FFFFFF",
+	            "opacity": 0.4,
+	            "border": true,
+	            "borderWidth": 2,
+	            "max": 1
+	        },
+	        "tooltip": {
+	            "showBox": false,
+	            "showArrow": false,
+	            "showCategory": false,
+	            "borderWidth": 0,
+	            "borderRadius": 0,
+	            "borderColor": "#000000",
+	            "borderOpacity": 0.7,
+	            "bgColor": "#000000",
+	            "bgOpacity": 0.7,
+	            "gridType": "solid",
+	            "dashLength": 4,
+	            "gridColor": "#CCCCCC",
+	            "fontColor": "#FFFFFF",
+	            "splitLine": false,
+	            "horizentalLine": false,
+	            "xAxisLabel": false,
+	            "yAxisLabel": false,
+	            "labelBgColor": "#FFFFFF",
+	            "labelBgOpacity": 0.7,
+	            "labelFontColor": "#666666"
+	        }
+	    }
+	},
+	
 }
 
 export default cfu;