chenghx
7 years ago
parent
f7dee15838
commit
5ea08d91bb
10 changed files with 260 additions and 87 deletions
@ -0,0 +1,67 @@ |
||||
<template> |
||||
<div class="mini-chart"> |
||||
<div class="chart-content" :style="{height: 46}"> |
||||
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]"> |
||||
<v-tooltip /> |
||||
<v-smooth-area position="x*y" /> |
||||
</v-chart> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import moment from 'moment' |
||||
|
||||
const data = [] |
||||
const beginDay = new Date().getTime() |
||||
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5] |
||||
for (let i = 0; i < fakeY.length; i += 1) { |
||||
data.push({ |
||||
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
||||
y: fakeY[i] |
||||
}) |
||||
} |
||||
|
||||
const tooltip = [ |
||||
'x*y', |
||||
(x, y) => ({ |
||||
name: x, |
||||
value: y |
||||
}) |
||||
] |
||||
|
||||
const scale = [{ |
||||
dataKey: 'x', |
||||
min: 2 |
||||
}, { |
||||
dataKey: 'y', |
||||
title: '时间', |
||||
min: 1, |
||||
max: 22 |
||||
}] |
||||
|
||||
export default { |
||||
name: 'MiniArea', |
||||
data () { |
||||
return { |
||||
data, |
||||
scale, |
||||
tooltip, |
||||
height: 100 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.mini-chart { |
||||
position: relative; |
||||
width: 100% |
||||
} |
||||
.mini-chart .chart-content{ |
||||
position: absolute; |
||||
bottom: -28px; |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,59 @@ |
||||
<template> |
||||
<div class="mini-chart"> |
||||
<div class="chart-content" :style="{height: 46}"> |
||||
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]"> |
||||
<v-tooltip /> |
||||
<v-bar position="x*y" /> |
||||
</v-chart> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import moment from 'moment' |
||||
|
||||
const data = [] |
||||
const beginDay = new Date().getTime() |
||||
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5] |
||||
for (let i = 0; i < fakeY.length; i += 1) { |
||||
data.push({ |
||||
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'), |
||||
y: fakeY[i] |
||||
}) |
||||
} |
||||
|
||||
const tooltip = [ |
||||
'x*y', |
||||
(x, y) => ({ |
||||
name: x, |
||||
value: y |
||||
}) |
||||
] |
||||
|
||||
const scale = [{ |
||||
dataKey: 'x', |
||||
min: 2 |
||||
}, { |
||||
dataKey: 'y', |
||||
title: '时间', |
||||
min: 1, |
||||
max: 22 |
||||
}] |
||||
|
||||
export default { |
||||
name: 'MiniBar', |
||||
data () { |
||||
return { |
||||
data, |
||||
scale, |
||||
tooltip, |
||||
height: 100 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
@import "index.less"; |
||||
</style> |
||||
@ -1,51 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale"> |
||||
<v-tooltip /> |
||||
<v-axis /> |
||||
<v-smooth-area position="time*value" /> |
||||
</v-chart> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import 'viser-vue' |
||||
|
||||
const data = [ |
||||
{ time: 0, value: 23620 }, |
||||
{ time: 2, value: 16100 }, |
||||
{ time: 4, value: 15900 }, |
||||
{ time: 6, value: 17409 }, |
||||
{ time: 8, value: 17000 }, |
||||
{ time: 10, value: 31056 }, |
||||
{ time: 12, value: 31982 }, |
||||
{ time: 14, value: 32040 }, |
||||
{ time: 16, value: 33233 }, |
||||
{ time: 18, value: 33233 }, |
||||
{ time: 20, value: 33233 }, |
||||
{ time: 22, value: 33233 } |
||||
] |
||||
|
||||
const scale = [{ |
||||
dataKey: 'value', |
||||
min: 10000 |
||||
}, { |
||||
dataKey: 'year', |
||||
min: 0, |
||||
max: 1 |
||||
}] |
||||
export default { |
||||
name: 'MiniChart', |
||||
data () { |
||||
return { |
||||
data, |
||||
scale, |
||||
height: 400 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,58 @@ |
||||
<template> |
||||
<div class="mini-progress"> |
||||
<a-tooltip :title="'目标值：' + target + '%'"> |
||||
<div class="target" :style="{left: target + '%'}"> |
||||
<span :style="{backgroundColor: color}" /> |
||||
<span :style="{backgroundColor: color}" /> |
||||
</div> |
||||
</a-tooltip> |
||||
<div class="wrap"> |
||||
<div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip' |
||||
export default { |
||||
name: 'MiniProgress', |
||||
components: {ATooltip}, |
||||
props: ['target', 'color', 'percent', 'height'] |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.mini-progress { |
||||
padding: 5px 0; |
||||
position: relative; |
||||
width: 100%; |
||||
.wrap { |
||||
background-color: #f5f5f5; |
||||
position: relative; |
||||
} |
||||
.progress { |
||||
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; |
||||
border-radius: 1px 0 0 1px; |
||||
background-color: #13C2C2; |
||||
width: 0; |
||||
height: 100%; |
||||
} |
||||
.target { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
span { |
||||
border-radius: 100px; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
height: 4px; |
||||
width: 2px; |
||||
} |
||||
span:last-child { |
||||
top: auto; |
||||
bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,9 @@ |
||||
.mini-chart{ |
||||
position: relative; |
||||
width: 100%; |
||||
.chart-content{ |
||||
position: absolute; |
||||
bottom: -28px; |
||||
width: 100%; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue