Skip to content

C
CFFP-HB
Commit 878981fd by kyle
Options

学习统计

parent a8c2053c
Showing with 69 additions and 40 deletions
components/charts/charts.vue
<template> <template>
<view class="charts-box"> <view class="charts-box">
<qiun-data-charts <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" :tooltipShow="false" @getIndex="tap"/>
type="column"
:opts="opts"
:chartData="chartData"
@getIndex="tap"
/>
</view> </view>
</template> </template>
...@@ -15,22 +10,28 @@ export default { ...@@ -15,22 +10,28 @@ export default {
props:['chartData'], props:['chartData'],
data() { data() {
return { return {
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 opts: { },
opts: { }
}; };
}, },
setup(props,content) { setup(props,content) {
const chartData = ref(props.chartData); const chartData = ref(props.chartData);
const tap = function(e){ const tap = (e)=>{
content.emit('tap',e) const index = e.currentIndex.index;
console.log(e)
content.emit('getIndex',index)
} }
return {chartData,tap} return {chartData,tap}
}, },
mounted() { mounted() {
this.opts = { this.opts = {
color:['#5F83FF'], color:['#5F83FF'],
touchMoveLimit: 24,
enableScroll: true,
xAxis: { xAxis: {
fontSize:10, fontSize:10,
scrollShow: true,
itemCount: 12,
format:'xAxisDemo3', format:'xAxisDemo3',
}, },
yAxis:{ yAxis:{
...@@ -54,12 +55,16 @@ export default { ...@@ -54,12 +55,16 @@ export default {
}, },
column:{ column:{
barBorderRadius:[5,5,0,0], barBorderRadius:[5,5,0,0],
width:15, width: 15,
activeBgColor:'#000',
activeBgOpacity:0.05
} }
} }
}; };
}, },
methods: {} methods: {
}
}; };
</script> </script>
...@@ -67,6 +72,6 @@ export default { ...@@ -67,6 +72,6 @@ export default {
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box { .charts-box {
width: 100%; width: 100%;
height: 300px; height: 600rpx;
} }
</style> </style>
\ No newline at end of file
pages/learningStatistics/learningStatistics.vue
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<h4>学习明细</h4> <h4>学习明细</h4>
<view class="lineChartBox"> <view class="lineChartBox">
<view v-if="studyInfos && chartData"> <view v-if="studyInfos && chartData">
<charts :chartData="chartData" @tap="tap"></charts> <charts :chartData="chartData" @getIndex="tap"></charts>
<view class="chartTips"> <view class="chartTips">
<view class="imgBox"> <view class="imgBox">
<image src="../../static/point.png" mode="widthFix"></image> <image src="../../static/point.png" mode="widthFix"></image>
...@@ -98,14 +98,28 @@ ...@@ -98,14 +98,28 @@
</view> </view>
</view> </view>
<view class="calendarBox"> <view class="calendarBox">
<uni-calendar <!-- 以防页面闪烁。日历提示需要刷新dom -->
<template v-if="showCalendar">
<view><uni-calendar
:date="currentDate"
:insert="true" :insert="true"
:lunar="true" :lunar="true"
:start-date="'2019-3-2'" :start-date="'2022-01-01'"
:end-date="'2019-5-20'" :end-date="'2099-12-31'"
:selected="calendarSelected" :selected="calendarSelected"
@monthSwitch="monthSwitch"
@change="calendarChange" @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> </view>
</view> </view>
...@@ -128,7 +142,11 @@ ...@@ -128,7 +142,11 @@
}, },
chartData:{}, chartData:{},
studyInfos:[], studyInfos:[],
calendarSelected:[] calendarSelected:[],
index:0,
categoriesArr:[],
currentDate:new Date().toDateString(),
showCalendar:false
}; };
}, },
methods:{ methods:{
...@@ -137,30 +155,18 @@ ...@@ -137,30 +155,18 @@
if(res['success']){ if(res['success']){
this.userStudyCountList = res['data']; this.userStudyCountList = res['data'];
this.studyInfos = res['data']['studyInfos']; this.studyInfos = res['data']['studyInfos'];
let first = 0;
let end = 0;
let categories=[]; let categories=[];
let data = []; let data = [];
if(this.studyInfos.length >0){ 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 j=0;j<this.studyInfos.length;j++){
for(let i=0;i<categories.length;i++){ categories.push(this.studyInfos[j].month.split('-')[1]);
if(this.studyInfos[j].month.split('-')[1]==categories[i]){ data.push({value:this.studyInfos[j]['studyTime'],color:'#9EB4FF'});
data[i] = this.studyInfos[j].studyTime;
break;
}else{
data[i] = data[i] ? data[i] : '0';
}
} }
} }
this.currentDate = this.month = this.studyInfos[this.studyInfos.length - 1].month;
this.chartData.categories = categories; this.chartData.categories = categories;
this.chartData.series = [{name:'月',data:data}]; this.chartData.series = [{name:'月',data:data}];
this.userStudyTime()
} }
}) })
}, },
...@@ -178,17 +184,34 @@ ...@@ -178,17 +184,34 @@
api.userStudyTime({userId:this.userId,month:this.month}).then(res=>{ api.userStudyTime({userId:this.userId,month:this.month}).then(res=>{
if(res['success']){ if(res['success']){
this.userStudyTimeList = res['data']['studyInfos']; 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){ 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() { mounted() {
this.userStudyCount() this.userStudyCount()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment