学习明细

components/charts/charts.vue

+<template>
+  <view class="charts-box">
+    <qiun-data-charts 
+      type="column"
+      :opts="opts"
+      :chartData="chartData"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+	// props:{chartData},
+	data() {
+		return {
+		  chartData: {
+			  categories: ["1","2","3","4","5","6"],
+			  series: [
+				{
+				  name: "学习时间",
+				  data: [35,36,31,33,13,34]
+				}
+			  ]
+		  },
+		  //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
+		  opts: {
+		   
+		  }
+		};
+	  },
+  mounted() {
+		this.opts = {
+			color:['#5F83FF'],
+			xAxis: {
+				fontSize:10,
+				format:'xAxisDemo3',
+			},
+			yAxis:{
+				showTitle:true,
+				data:[{
+					title:'（分钟）',
+					titleFontSize:10,
+					titleOffsetY:-5
+				}]
+			},
+			legend:{
+				show:false
+			},
+			series:{
+				
+			},
+			extra:{
+				tootip:{
+					showBox:false,
+					showArrow:false
+				},
+				column:{
+					barBorderRadius:[5,5,0,0],
+					width:15,
+				}
+			}
+		};
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style scoped>
+  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
+  .charts-box {
+    width: 100%;
+    height: 300px;
+  }
+</style>
\ No newline at end of file

pages/learningStatistics/learningStatistics.vue

@@ -84,11 +84,18 @@
 		<view class="studyDetailBox">
 			<h4>学习明细</h4>
 			<view class="lineChartBox">
-				  <qiun-data-charts 
-				      type="column"
-				      :opts="opts"
-				      :chartData="chartData"
-				    />
+				<view v-if="studyInfos">
+					<charts></charts>
+					<view class="chartTips">
+						 <view class="imgBox">
+							<image src="../../static/point.png" mode="widthFix"></image>
+						 </view>
+						<text>点击可查看对应数据</text>
+					</view>
+				</view>
+				<view class="noListTip" v-if="!studyInfos">
+					暂无学习明细
+				</view>
 			</view>
 			<view class="calendarBox">
 				
@@ -99,10 +106,11 @@
 
 <script>
 	import api from "@/api/api";
+	import charts from "@/components/charts/charts.vue";
 	export default {
+		components:{charts},
 		data() {
 			return {
-				chartData: {},
 				userId:'1',
 				userStudyCountList:{},
 				userCoursePackBarList:{},
@@ -111,29 +119,8 @@
 				state:{
 					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
-				  }
-				}
-			  }
+				chartData:{},
+				studyInfos:[]
 			};
 		},
 		methods:{
@@ -141,6 +128,30 @@
 				api.userStudyCount({userId:this.userId}).then(res=>{
 					if(res['success']){
 						this.userStudyCountList = res['data'];
+						this.studyInfos = res['data']['studyInfos'];
+						let first = 0;
+						let end = 0;
+						let categories=[];
+						let data = [];
+						if(this.studyInfos.length >0){
+							first = parseInt(this.studyInfos[0].month.split('-')[1]);
+							end = parseInt(this.studyInfos[this.studyInfos.length - 1].month.split('-')[1]);
+						}
+						for(let n=first;n<=end;n++){
+							categories.push(n);
+						}
+						for(let j=0;j<=this.studyInfos.length;j++){
+							for(let i=0;i<=categories.length;i++){
+								if(this.studyInfos[i] && (parseInt(this.studyInfos[i].month.split('-')[1])==categories[i])){
+									data.push(this.studyInfos[i].studyTime)
+								}else{
+									data.push('0')
+								}
+							}
+						}
+						this.chartData.categories = categories;
+						// this.chartData.series[0].data = data;
+						console.log(data)
 					}
 				})
 			},
@@ -160,34 +171,11 @@
 						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() {
 			this.userStudyCount()
-		},
-		  onReady() {
-			this.getServerData();
-		  },
+		}
 	}
 </script>
 
@@ -354,9 +342,21 @@
 				box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1);
 				border-radius: 10rpx;
 			}
-			.lineCharBox{
+			.lineChartBox{
 				width: 100%;
 				height: 600rpx;
+				.chartTips{
+					text-align: center;
+					font-size: 20rpx;
+					color: #c1c1c1;
+					display: flex;
+					justify-content: center;
+					padding-top: 10rpx;
+					background: #fff;
+					.imgBox{
+						width: 30rpx;
+					}
+				}
 			}
 		}
 	}

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

@@ -58,6 +58,7 @@ const cfu = {
     "yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
     "xAxisDemo1":function(val, index, opts){return val+'年';},
     "xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
+    "xAxisDemo3":function(val, index, opts){return val + '月'},
     "seriesDemo1":function(val, index, series, opts){return val+'元'},
     "tooltipDemo1":function(item, category, index, opts){
       if(index==0){