1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| import { McLineChart, Options } from '@mcui/mccharts'
| import { router } from '@kit.ArkUI'
|
| @Entry
| @Component
| struct LearningRecordPage {
| @State maxData: number[] = [0, 0, 0, 5, 0, 5, 0]
| // 初始化数据
| @State seriesOption: Options = new Options({
| xAxis:{
| data:['09-01','09-02','09-03','09-04','09-05','09-06','09-07']
| },
| yAxis:{
| name:'分钟'
| },
| series:[
| {
| name:'学习时长',
| data: this.maxData
| }
| ]
| })
|
| build() {
| Column() {
| Row() {
| Image($r('app.media.left_icon'))
| .width(20)
| .height(20)
| .onClick(() => {
| router.back()
| })
| Text('学习记录')
| .fontSize(18)
| .fontWeight(700)
| Row()
| }
| .width('100%')
| .padding(10)
| .justifyContent(FlexAlign.SpaceBetween)
|
| Divider()
|
| Column({ space: 20 }) {
| Row() {
| Column({ space: 12 }) {
| Text('总学习时长')
| .fontColor('#666666')
| .fontSize(14)
| Text() {
| Span('10')
| .fontSize(20)
| .fontWeight(700)
| .fontColor('#1761f4')
| Span(' 分钟')
| .fontSize(12)
| }
| }
| Column({ space: 12 }) {
| Text('今日学习时长')
| .fontColor('#666666')
| .fontSize(14)
| Text() {
| Span('0')
| .fontSize(20)
| .fontWeight(700)
| .fontColor('#1761f4')
| Span(' 分钟')
| .fontSize(12)
| }
| }
| }
| .width('100%')
| .justifyContent(FlexAlign.SpaceEvenly)
| .padding(20)
| .borderRadius(10)
| .shadow({ radius: 10, color: '#dcdcdc' })
|
| Text('近一周学习时长统计')
| .fontSize(14)
| .fontColor(Color.Black)
| .fontWeight(500)
| .width('100%')
|
| Column(){
| McLineChart({
| options: this.seriesOption
| })
| }
| .width('100%')
| .height(200)
|
| }
| .padding(16)
|
|
|
| }
| .width('100%')
| .height('100%')
| }
| }
|
|
