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