Skip to content

C
CFFP-HB
Commit 3003ad85 by kyle
Options

学习明细

parent a78e5abe
Showing with 133 additions and 55 deletions
components/charts/charts.vue 0 → 100644
<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 @@ ...@@ -84,11 +84,18 @@
<view class="studyDetailBox"> <view class="studyDetailBox">
<h4>学习明细</h4> <h4>学习明细</h4>
<view class="lineChartBox"> <view class="lineChartBox">
<qiun-data-charts <view v-if="studyInfos">
type="column" <charts></charts>
:opts="opts" <view class="chartTips">
:chartData="chartData" <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>
<view class="calendarBox"> <view class="calendarBox">
...@@ -99,10 +106,11 @@ ...@@ -99,10 +106,11 @@
<script> <script>
import api from "@/api/api"; import api from "@/api/api";
import charts from "@/components/charts/charts.vue";
export default { export default {
components:{charts},
data() { data() {
return { return {
chartData: {},
userId:'1', userId:'1',
userStudyCountList:{}, userStudyCountList:{},
userCoursePackBarList:{}, userCoursePackBarList:{},
...@@ -111,29 +119,8 @@ ...@@ -111,29 +119,8 @@
state:{ state:{
package:false package:false
}, },
opts: { chartData:{},
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], studyInfos:[]
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:{
...@@ -141,6 +128,30 @@ ...@@ -141,6 +128,30 @@
api.userStudyCount({userId:this.userId}).then(res=>{ api.userStudyCount({userId:this.userId}).then(res=>{
if(res['success']){ if(res['success']){
this.userStudyCountList = res['data']; 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 @@ ...@@ -160,34 +171,11 @@
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>
...@@ -354,9 +342,21 @@ ...@@ -354,9 +342,21 @@
box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1);
border-radius: 10rpx; border-radius: 10rpx;
} }
.lineCharBox{ .lineChartBox{
width: 100%; width: 100%;
height: 600rpx; 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 = { ...@@ -58,6 +58,7 @@ const cfu = {
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)}, "yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
"xAxisDemo1":function(val, index, opts){return val+'年';}, "xAxisDemo1":function(val, index, opts){return val+'年';},
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')}, "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+'元'}, "seriesDemo1":function(val, index, series, opts){return val+'元'},
"tooltipDemo1":function(item, category, index, opts){ "tooltipDemo1":function(item, category, index, opts){
if(index==0){ if(index==0){
......
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