学习统计

components/charts/charts.vue

 <template>
   <view class="charts-box">
-    <qiun-data-charts 
-      type="column"
-      :opts="opts"
-      :chartData="chartData"
-	  @getIndex="tap"
-    />
+    <qiun-data-charts  type="column" :opts="opts" :chartData="chartData" :ontouch="true" :tooltipShow="false"  @getIndex="tap"/>
   </view>
 </template>
 
@@ -15,22 +10,28 @@ export default {
 	props:['chartData'],
 	data() {
 		return {
-		  //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
-		  opts: { }
+		  opts: { },
+		  
 		};
 	  },
 	  setup(props,content) {
 	  	const chartData = ref(props.chartData);
-		const tap = function(e){
-			content.emit('tap',e)
+		const tap = (e)=>{
+			const index = e.currentIndex.index;
+			console.log(e)
+			content.emit('getIndex',index)
 		}
 	  	return {chartData,tap}
 	  },
   mounted() {
 		this.opts = {
 			color:['#5F83FF'],
+			touchMoveLimit: 24,
+			enableScroll: true,
 			xAxis: {
 				fontSize:10,
+				scrollShow: true,
+				itemCount: 12,
 				format:'xAxisDemo3',
 			},
 			yAxis:{
@@ -54,12 +55,16 @@ export default {
 				},
 				column:{
 					barBorderRadius:[5,5,0,0],
-					width:15,
+					width: 15,
+					activeBgColor:'#000',
+					activeBgOpacity:0.05
 				}
 			}
 		};
   },
-  methods: {}
+  methods: {
+	  
+  }
 };
 </script>
 
@@ -67,6 +72,6 @@ export default {
   /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
   .charts-box {
     width: 100%;
-    height: 300px;
+    height: 600rpx;
   }
 </style>
\ No newline at end of file

pages/learningStatistics/learningStatistics.vue

@@ -85,7 +85,7 @@
 			<h4>学习明细</h4>
 			<view class="lineChartBox">
 				<view v-if="studyInfos && chartData">
-					<charts :chartData="chartData" @tap="tap"></charts>
+					<charts :chartData="chartData" @getIndex="tap"></charts>
 					<view class="chartTips">
 						 <view class="imgBox">
 							<image src="../../static/point.png" mode="widthFix"></image>
@@ -98,14 +98,28 @@
 				</view>
 			</view>
 			<view class="calendarBox">
-				<uni-calendar 
+				<!-- 以防页面闪烁。日历提示需要刷新dom -->
+				<template v-if="showCalendar">
+					<view><uni-calendar
+					:date="currentDate"
 					:insert="true"
 					:lunar="true" 
-					:start-date="'2019-3-2'"
-					:end-date="'2019-5-20'"
+					:start-date="'2022-01-01'"
+					:end-date="'2099-12-31'"
 					:selected="calendarSelected"
+					@monthSwitch="monthSwitch"
 					@change="calendarChange"
-				 />
+				 /></view>
+				</template>
+				<template v-if="!showCalendar">
+					<view><uni-calendar
+					:date="currentDate"
+					:insert="true"
+					:lunar="true" 
+					:start-date="'2022-01-01'"
+					:end-date="'2099-12-31'"
+				 /></view>
+				</template>
 			</view>
 		</view>
 	</view>
@@ -128,7 +142,11 @@
 				},
 				chartData:{},
 				studyInfos:[],
-				calendarSelected:[]
+				calendarSelected:[],
+				index:0,
+				categoriesArr:[],
+				currentDate:new Date().toDateString(),
+				showCalendar:false
 			};
 		},
 		methods:{
@@ -137,30 +155,18 @@
 					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);
-						}
-						data = categories.map(item=>item*0);
-						for(let j=0;j<this.studyInfos.length;j++){
-						    for(let i=0;i<categories.length;i++){
-						        if(this.studyInfos[j].month.split('-')[1]==categories[i]){
-						            data[i] = this.studyInfos[j].studyTime;
-						            break;
-						        }else{
-									data[i] =  data[i] ?  data[i] : '0';
-								}
-						    }
+							for(let j=0;j<this.studyInfos.length;j++){
+								categories.push(this.studyInfos[j].month.split('-')[1]);
+								data.push({value:this.studyInfos[j]['studyTime'],color:'#9EB4FF'});
+							}
 						}
+						this.currentDate = this.month = this.studyInfos[this.studyInfos.length - 1].month;
 						this.chartData.categories = categories;
 						this.chartData.series = [{name:'月',data:data}];
+						this.userStudyTime()
 					}
 				})
 			},
@@ -178,17 +184,34 @@
 				api.userStudyTime({userId:this.userId,month:this.month}).then(res=>{
 					if(res['success']){
 						this.userStudyTimeList = res['data']['studyInfos'];
-						console.log(this.userStudyTimeList)
+						this.$nextTick(() => {
+							this.showCalendar = true
+						})
+						if(this.userStudyTimeList){
+							for(let i=0;i<this.userStudyTimeList.length;i++){
+								let arr = {date:'',info:''}
+								arr.date = this.userStudyTimeList[i]['day'];
+								arr.info = this.userStudyTimeList[i]['studyTime'] + '分';
+								this.calendarSelected.push(arr)
+							}
+						}
 					}
 				})
 			},
-			calendarChange(){
-				
+			monthSwitch(e){
+				// console.log(e)
+			},
+			calendarChange(e){
+				// console.log(e)
 			},
 			tap(e){
-				// console.log(e.currentIndex.index)
+				this.index = e;
+				this.month = this.studyInfos[this.index].month;
+				this.calendarSelected = [];
+				this.currentDate = this.month;
+				this.showCalendar = false;
+				this.userStudyTime();
 			}
-			
 		},
 		mounted() {
 			this.userStudyCount()