图表

pages/learningStatistics/learningStatistics.vue

@@ -84,7 +84,11 @@
 		<view class="studyDetailBox">
 		<view class="studyDetailBox">
 			<h4>学习明细</h4>
 			<h4>学习明细</h4>
 			<view class="lineChartBox">
 			<view class="lineChartBox">
-				
+				  <qiun-data-charts 
+				      type="column"
+				      :opts="opts"
+				      :chartData="chartData"
+				    />
 			</view>
 			</view>
 			<view class="calendarBox">
 			<view class="calendarBox">
 				
 				
@@ -98,15 +102,38 @@
 	export default {
 	export default {
 		data() {
 		data() {
 			return {
 			return {
+				chartData: {},
 				userId:'1',
 				userId:'1',
 				userStudyCountList:{},
 				userStudyCountList:{},
 				userCoursePackBarList:{},
 				userCoursePackBarList:{},
 				userStudyTimeList:{},
 				userStudyTimeList:{},
 				month:'',
 				month:'',
 				state:{
 				state:{
-					package:false,
-					file:false
+					package:false
+				},
+			  opts: {
+				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+				padding: [15,15,0,5],
+				legend: {},
+				xAxis: {
+				  disableGrid: true
+				},
+				yAxis: {
+				  data: [
+					{
+					  min: 0
+					}
+				  ]
+				},
+				extra: {
+				  column: {
+					type: "group",
+					width: 30,
+					activeBgColor: "#000000",
+					activeBgOpacity: 0.08
+				  }
 				}
 				}
+			  }
 			};
 			};
 		},
 		},
 		methods:{
 		methods:{
@@ -133,11 +160,34 @@
 						this.userStudyTimeList = res['data'];
 						this.userStudyTimeList = res['data'];
 					}
 					}
 				})
 				})
-			}
+			},
+			 getServerData() {
+			      //模拟从服务器获取数据时的延时
+			      setTimeout(() => {
+			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+			        let res = {
+			            categories: ["2016","2017","2018","2019","2020","2021"],
+			            series: [
+			              {
+			                name: "目标值",
+			                data: [35,36,31,33,13,34]
+			              },
+			              {
+			                name: "完成量",
+			                data: [18,27,21,24,6,28]
+			              }
+			            ]
+			          };
+			        this.chartData = JSON.parse(JSON.stringify(res));
+			      }, 500);
+			    }
 		},
 		},
 		mounted() {
 		mounted() {
 			this.userStudyCount()
 			this.userStudyCount()
-		}
+		},
+		  onReady() {
+			this.getServerData();
+		  },
 	}
 	}
 </script>
 </script>
 
 
@@ -296,5 +346,18 @@
 				}
 				}
 			}
 			}
 		}
 		}
+		.studyDetailBox{
+			background-color: #fff;
+			margin-top: 20rpx;
+			.calendarBox{
+				margin: 0 20rpx;
+				box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1);
+				border-radius: 10rpx;
+			}
+			.lineCharBox{
+				width: 100%;
+				height: 600rpx;
+			}
+		}
 	}
 	}
 </style>
 </style>