File tree Expand file tree Collapse file tree 4 files changed +41
-23
lines changed Expand file tree Collapse file tree 4 files changed +41
-23
lines changed Original file line number Diff line number Diff line change 5
5
<script >
6
6
import echarts from ' echarts'
7
7
import tdTheme from ' ./theme.json'
8
+ import { on , off } from ' @/libs/tools'
8
9
echarts .registerTheme (' tdTheme' , tdTheme)
9
10
export default {
10
11
name: ' ChartBar' ,
@@ -13,6 +14,16 @@ export default {
13
14
text: String ,
14
15
subtext: String
15
16
},
17
+ data () {
18
+ return {
19
+ dom: null
20
+ }
21
+ },
22
+ methods: {
23
+ resize () {
24
+ this .dom .resize ()
25
+ }
26
+ },
16
27
mounted () {
17
28
this .$nextTick (() => {
18
29
let xAxisData = Object .keys (this .value )
@@ -35,15 +46,13 @@ export default {
35
46
type: ' bar'
36
47
}]
37
48
}
38
- let dom = echarts .init (this .$refs .dom , ' tdTheme' )
39
- dom .setOption (option)
49
+ this .dom = echarts .init (this .$refs .dom , ' tdTheme' )
50
+ this .dom .setOption (option)
51
+ on (window , ' resize' , this .resize )
40
52
})
53
+ },
54
+ beforeDestroy () {
55
+ off (window , ' resize' , this .resize )
41
56
}
42
57
}
43
58
</script >
44
-
45
- <style lang="less">
46
- .charts {
47
- //
48
- }
49
- </style >
Original file line number Diff line number Diff line change 5
5
<script >
6
6
import echarts from ' echarts'
7
7
import tdTheme from ' ./theme.json'
8
+ import { on , off } from ' @/libs/tools'
8
9
echarts .registerTheme (' tdTheme' , tdTheme)
9
10
export default {
10
11
name: ' ChartPie' ,
@@ -13,6 +14,16 @@ export default {
13
14
text: String ,
14
15
subtext: String
15
16
},
17
+ data () {
18
+ return {
19
+ dom: null
20
+ }
21
+ },
22
+ methods: {
23
+ resize () {
24
+ this .dom .resize ()
25
+ }
26
+ },
16
27
mounted () {
17
28
this .$nextTick (() => {
18
29
let legend = this .value .map (_ => _ .name )
@@ -47,15 +58,13 @@ export default {
47
58
}
48
59
]
49
60
}
50
- let dom = echarts .init (this .$refs .dom , ' tdTheme' )
51
- dom .setOption (option)
61
+ this .dom = echarts .init (this .$refs .dom , ' tdTheme' )
62
+ this .dom .setOption (option)
63
+ on (window , ' resize' , this .resize )
52
64
})
65
+ },
66
+ beforeDestroy () {
67
+ off (window , ' resize' , this .resize )
53
68
}
54
69
}
55
70
</script >
56
-
57
- <style lang="less">
58
- .charts {
59
- //
60
- }
61
- </style >
Original file line number Diff line number Diff line change @@ -104,11 +104,11 @@ export default {
104
104
this .$nextTick (() => {
105
105
this .dom = echarts .init (this .$refs .dom )
106
106
this .dom .setOption (option)
107
- on (window , ' resize' , this .resize () )
107
+ on (window , ' resize' , this .resize )
108
108
})
109
109
},
110
110
beforeDestroy () {
111
- off (window , ' resize' , this .resize () )
111
+ off (window , ' resize' , this .resize )
112
112
}
113
113
}
114
114
</script >
Original file line number Diff line number Diff line change 1
1
<template >
2
2
<div >
3
3
<Row :gutter =" 20" >
4
- <i-col span = " 4" v-for =" (infor, i) in inforCardData" :key =" `infor-${i}`" style =" height : 120px ;" >
4
+ <i-col :xs = " 12 " :md = " 8 " :lg = " 4" v-for =" (infor, i) in inforCardData" :key =" `infor-${i}`" style =" height : 120px ; padding-bottom : 10 px ;" >
5
5
<infor-card shadow :color =" infor.color" :icon =" infor.icon" :icon-size =" 36" >
6
6
<count-to :end =" infor.count" count-class =" count-style" />
7
7
<p >{{ infor.title }}</p >
8
8
</infor-card >
9
9
</i-col >
10
10
</Row >
11
- <Row :gutter =" 20" style =" margin-top : 20 px ;" >
12
- <i-col span = " 8 " >
11
+ <Row :gutter =" 20" style =" margin-top : 10 px ;" >
12
+ <i-col :md = " 24 " :lg = " 8 " style = " margin-bottom : 20 px ; " >
13
13
<Card shadow >
14
14
<chart-pie style =" height : 300px ;" :value =" pieData" text =" 用户访问来源" ></chart-pie >
15
15
</Card >
16
16
</i-col >
17
- <i-col span = " 16 " >
17
+ <i-col :md = " 24 " :lg = " 16 " style = " margin-bottom : 20 px ; " >
18
18
<Card shadow >
19
19
<chart-bar style =" height : 300px ;" :value =" barData" text =" 每周用户活跃量" />
20
20
</Card >
21
21
</i-col >
22
22
</Row >
23
- <Row style = " margin-top : 20 px ; " >
23
+ <Row >
24
24
<Card shadow >
25
25
<example style =" height : 310px ;" />
26
26
</Card >
You can’t perform that action at this time.
0 commit comments