mini chart 完善
This commit is contained in:
chenghx
67
src/components/chart/MiniArea.vue
Normal file
67
src/components/chart/MiniArea.vue
Normal file
@@ -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>
|
||||
59
src/components/chart/MiniBar.vue
Normal file
59
src/components/chart/MiniBar.vue
Normal file
@@ -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>
|
||||
58
src/components/chart/MiniProgress.vue
Normal file
58
src/components/chart/MiniProgress.vue
Normal file
@@ -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>
|
||||
9
src/components/chart/index.less
Normal file
9
src/components/chart/index.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.mini-chart{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.chart-content{
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -7,10 +7,12 @@
|
||||
<slot name="action"></slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="total"><span>￥ 1358.34</span></div>
|
||||
<div class="total"><span>{{total}}</span></div>
|
||||
</div>
|
||||
<div class="chart-card-content">
|
||||
<slot></slot>
|
||||
<div class="content-fix">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-card-footer">
|
||||
<slot name="footer"></slot>
|
||||
@@ -23,7 +25,7 @@ import ACard from 'vue-antd-ui/es/card/Card'
|
||||
export default {
|
||||
name: 'ChartCard',
|
||||
components: {ACard},
|
||||
props: ['title']
|
||||
props: ['title', 'total']
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -67,6 +69,13 @@ export default {
|
||||
.chart-card-content{
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-card-content .content-fix{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<a-row style="margin: -12px">
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
@@ -22,52 +22,34 @@
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-chart />
|
||||
<mini-area />
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
|
||||
同周比
|
||||
<span>12%</span>
|
||||
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
|
||||
</div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
|
||||
日环比
|
||||
<span>11%</span>
|
||||
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
|
||||
</div>
|
||||
<mini-bar />
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<chart-card title="营销活动说明" total="73%">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
|
||||
同周比
|
||||
<span>12%</span>
|
||||
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
|
||||
</div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
|
||||
日环比
|
||||
<span>11%</span>
|
||||
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
|
||||
</div>
|
||||
<mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
@@ -83,10 +65,12 @@ import ACard from 'vue-antd-ui/es/card/Card'
|
||||
import ChartCard from './ChartCard'
|
||||
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import MiniChart from '../chart/MiniChart'
|
||||
import MiniArea from '../chart/MiniArea'
|
||||
import MiniBar from '../chart/MiniBar'
|
||||
import MiniProgress from '../chart/MiniProgress'
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {MiniChart, AIcon, ATooltip, ChartCard, ACard, ARow, ACol}
|
||||
components: {MiniProgress, MiniBar, MiniArea, AIcon, ATooltip, ChartCard, ACard, ARow, ACol}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user