Skip to content

Commit e0d7253

Browse files
sendyasendya
committed
update Analysis
1 parent 807f2eb commit e0d7253

File tree

9 files changed

+352
-126
lines changed

9 files changed

+352
-126
lines changed

‎src/components/ChartCard.vue

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
</div>
1616
</div>
1717
<div class="chart-card-footer">
18-
<slot name="footer"></slot>
18+
<div class="field">
19+
<slot name="footer"></slot>
20+
</div>
1921
</div>
2022
</a-card>
2123
</template>
@@ -41,55 +43,69 @@
4143
</script>
4244

4345
<style lang="scss" scoped>
44-
.chart-card-header{
45-
position: relative;
46-
overflow: hidden;
47-
width: 100%;
46+
.chart-card-header {
47+
position: relative;
48+
overflow: hidden;
49+
width: 100%;
4850
49-
.meta{
50-
position: relative;
51-
overflow: hidden;
52-
width: 100%;
53-
color: rgba(0,0,0,.45);
54-
font-size: 14px;
55-
line-height: 22px;
56-
}
57-
}
58-
.chart-card-action{
59-
cursor: pointer;
60-
position: absolute;
61-
top: 0;
62-
right: 0;
51+
.meta {
52+
position: relative;
53+
overflow: hidden;
54+
width: 100%;
55+
color: rgba(0, 0, 0, .45);
56+
font-size: 14px;
57+
line-height: 22px;
6358
}
64-
.chart-card-footer{
65-
border-top: 1px solid #e8e8e8;
66-
padding-top: 9px;
67-
margin-top: 8px;
59+
}
60+
61+
.chart-card-action {
62+
cursor: pointer;
63+
position: absolute;
64+
top: 0;
65+
right: 0;
66+
}
67+
68+
.chart-card-footer {
69+
border-top: 1px solid #e8e8e8;
70+
padding-top: 9px;
71+
margin-top: 8px;
72+
73+
> * {
74+
position: relative;
6875
}
69-
.chart-card-content{
70-
margin-bottom: 12px;
71-
position: relative;
72-
height: 46px;
73-
width: 100%;
7476
75-
.content-fix{
76-
position: absolute;
77-
left: 0;
78-
bottom: 0;
79-
width: 100%;
80-
}
77+
.field {
78+
white-space: nowrap;
79+
overflow: hidden;
80+
text-overflow: ellipsis;
81+
margin: 0;
8182
}
83+
}
84+
85+
.chart-card-content {
86+
margin-bottom: 12px;
87+
position: relative;
88+
height: 46px;
89+
width: 100%;
8290
83-
.total {
84-
overflow: hidden;
85-
text-overflow: ellipsis;
86-
word-break: break-all;
87-
white-space: nowrap;
88-
color: #000;
89-
margin-top: 4px;
90-
margin-bottom: 0;
91-
font-size: 30px;
92-
line-height: 38px;
93-
height: 38px;
91+
.content-fix {
92+
position: absolute;
93+
left: 0;
94+
bottom: 0;
95+
width: 100%;
9496
}
97+
}
98+
99+
.total {
100+
overflow: hidden;
101+
text-overflow: ellipsis;
102+
word-break: break-all;
103+
white-space: nowrap;
104+
color: #000;
105+
margin-top: 4px;
106+
margin-bottom: 0;
107+
font-size: 30px;
108+
line-height: 38px;
109+
height: 38px;
110+
}
95111
</style>

‎src/components/chart/MiniArea.vue

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<div class="antv-mini-chart">
3-
<div class="chart-content" :style="{ height: 46 }">
4-
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
2+
<div class="antv-chart-mini">
3+
<div class="chart-wrapper" :style="{ height: 46 }">
4+
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
55
<v-tooltip />
66
<v-smooth-area position="x*y" />
77
</v-chart>
@@ -10,16 +10,17 @@
1010
</template>
1111

1212
<script>
13-
import moment from 'moment'
13+
import moment from 'dayjs'
1414
const data = []
1515
const beginDay = new Date().getTime()
16-
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
17-
for (let i = 0; i < fakeY.length; i += 1) {
16+
17+
for (let i = 0; i < 10; i++) {
1818
data.push({
1919
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
20-
y: fakeY[i]
20+
y: Math.round(Math.random() * 10)
2121
})
2222
}
23+
2324
const tooltip = [
2425
'x*y',
2526
(x, y) => ({
@@ -42,25 +43,14 @@
4243
data () {
4344
return {
4445
data,
45-
scale,
4646
tooltip,
47+
scale,
4748
height: 100
4849
}
4950
}
5051
}
5152
</script>
5253

5354
<style lang="scss" scoped>
54-
.antv-mini-chart {
55-
position: relative;
56-
width: 100%;
57-
58-
.chart-content {
59-
position: absolute;
60-
bottom: -28px;
61-
width: 100%;
62-
margin: 0 -5px;
63-
overflow: hidden;
64-
}
65-
}
55+
@import "chart";
6656
</style>

‎src/components/chart/MiniBar.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="antv-chart-mini">
3+
<div class="chart-wrapper" :style="{ height: 46 }">
4+
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
5+
<v-tooltip />
6+
<v-bar position="x*y" />
7+
</v-chart>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import moment from 'dayjs'
14+
const data = []
15+
const beginDay = new Date().getTime()
16+
17+
for (let i = 0; i < 10; i++) {
18+
data.push({
19+
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
20+
y: Math.round(Math.random() * 10)
21+
})
22+
}
23+
24+
const tooltip = [
25+
'x*y',
26+
(x, y) => ({
27+
name: x,
28+
value: y
29+
})
30+
]
31+
32+
const scale = [{
33+
dataKey: 'x',
34+
min: 2
35+
}, {
36+
dataKey: 'y',
37+
title: '时间',
38+
min: 1,
39+
max: 30
40+
}]
41+
42+
export default {
43+
name: "MiniBar",
44+
data () {
45+
return {
46+
data,
47+
tooltip,
48+
scale,
49+
height: 100
50+
}
51+
}
52+
}
53+
</script>
54+
55+
<style lang="scss" scoped>
56+
@import "chart";
57+
</style>

‎src/components/chart/MiniProgress.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="chart-mini-progress">
3+
<div class="target" :style="{ left: target + '%'}">
4+
<span :style="{ backgroundColor: color }" />
5+
<span :style="{ backgroundColor: color }"/>
6+
</div>
7+
<div class="progress-wrapper">
8+
<div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: "MiniProgress",
16+
props: {
17+
target: {
18+
type: Number,
19+
default: 0
20+
},
21+
height: {
22+
type: String,
23+
default: '10px'
24+
},
25+
color: {
26+
type: String,
27+
default: '#13C2C2'
28+
},
29+
percentage: {
30+
type: Number,
31+
default: 0
32+
}
33+
}
34+
}
35+
</script>
36+
37+
<style lang="scss" scoped>
38+
.chart-mini-progress {
39+
padding: 5px 0;
40+
position: relative;
41+
width: 100%;
42+
43+
.target {
44+
position: absolute;
45+
top: 0;
46+
bottom: 0;
47+
48+
span {
49+
border-radius: 100px;
50+
position: absolute;
51+
top: 0;
52+
left: 0;
53+
height: 4px;
54+
width: 2px;
55+
56+
&:last-child {
57+
top: auto;
58+
bottom: 0;
59+
}
60+
}
61+
}
62+
.progress-wrapper {
63+
background-color: #f5f5f5;
64+
position: relative;
65+
66+
.progress {
67+
transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
68+
border-radius: 1px 0 0 1px;
69+
background-color: #1890ff;
70+
width: 0;
71+
height: 100%;
72+
}
73+
}
74+
}
75+
</style>

0 commit comments

Comments
 (0)