parent
8d7bd3b4d1
commit
69859d9ebe
@ -0,0 +1,310 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="title">今日实时</div> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<div ref="today-chart" class="today-chart"></div> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<div class="grid-container"> |
||||
<div class="grid-item"> |
||||
<div class="text-center"> |
||||
<span class="small">支付金额</span> |
||||
<span class="big">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
<div class="text-center"> |
||||
<span class="small">昨日全天</span> |
||||
<span class="small">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="grid-item"> |
||||
<div class="text-center"> |
||||
<span class="small">访问用户数</span> |
||||
<span class="big">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
<div class="text-center"> |
||||
<span class="small">昨日全天</span> |
||||
<span class="small">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<div class="text-center"> |
||||
<span class="small">支付订单数</span> |
||||
<span class="big">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
<div class="text-center"> |
||||
<span class="small">昨日全天</span> |
||||
<span class="small">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<div class="text-center"> |
||||
<span class="small">下单用户数</span> |
||||
<span class="big">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
<div class="text-center"> |
||||
<span class="small">昨日全天</span> |
||||
<span class="small">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<div class="text-center"> |
||||
<span class="small">浏览量</span> |
||||
<span class="big">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
<div class="text-center"> |
||||
<span class="small">昨日全天</span> |
||||
<span class="small">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="grid-item"> |
||||
<div class="text-center"> |
||||
<span class="small">客单价</span> |
||||
<span class="big">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
<div class="text-center"> |
||||
<span class="small">昨日全天</span> |
||||
<span class="small">¥{{ Number(22267).toLocaleString() }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<div style="display:flex;justify-content: space-between;align-items:center;"> |
||||
<div class="title"> |
||||
|
||||
核心指标 |
||||
</div> |
||||
<div> |
||||
<span>本周</span> |
||||
<span>上周</span> |
||||
<span>本月</span> |
||||
<span>上月</span> |
||||
</div> |
||||
</div> |
||||
<el-row type="flex" justify="space-between" class="core"> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(22267).toLocaleString() }} </div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">访问次数</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(22267).toLocaleString() }} </div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">新增订单数</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">13.5%</div> |
||||
<div class="small">访问 - 支付转化率</div> |
||||
</el-col> |
||||
|
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(22267).toLocaleString() }}</div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">支付金额</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(1678).toLocaleString() }}</div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">下单用户数</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(48.70).toLocaleString() }}</div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">客单价</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(337).toLocaleString() }}</div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">新增用户数</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(6441).toLocaleString() }}</div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">老用户活跃数</div> |
||||
</el-col> |
||||
<el-col :span="2"> |
||||
<div class="big">{{ Number(337).toLocaleString() }}</div> |
||||
<div class="small"><span>环比</span><i class="el-icon-caret-top"></i>12.4%</div> |
||||
<div class="small"><span>周同比</span><i class="el-icon-caret-bottom"></i>12.4%</div> |
||||
<div class="small">访问用户数</div> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="bottom-chart" ref="bottom-chart"></div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import echarts from "@/plugins/echarts" |
||||
export default { |
||||
name: 'RealTimeData', |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
mounted() { |
||||
this.init_today() |
||||
this.init_bottom() |
||||
}, |
||||
methods: { |
||||
init_bottom() { |
||||
let myChart = echarts.init(this.$refs['bottom-chart']); |
||||
let option; |
||||
|
||||
option = { |
||||
xAxis: { |
||||
type: 'category', |
||||
data: Array.from(new Array(8).keys()).map(item => `5-${item * 3}`) |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
tooltip: { |
||||
show: true, |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
|
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '访问次数', |
||||
data: Array.from(new Array(8).keys()).map(item => Math.round(Math.random() * 500)), |
||||
type: 'line', |
||||
label: { |
||||
show: true |
||||
} |
||||
}, |
||||
{ |
||||
name: '新增订单数', |
||||
data: Array.from(new Array(8).keys()).map(item => Math.round(Math.random() * 500)), |
||||
type: 'line', |
||||
label: { |
||||
show: true |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
|
||||
option && myChart.setOption(option); |
||||
}, |
||||
init_today() { |
||||
let myChart = echarts.init(this.$refs['today-chart']); |
||||
let option; |
||||
|
||||
option = { |
||||
xAxis: { |
||||
type: 'category', |
||||
data: Array.from(new Array(8).keys()).map(item => `${(item * 3).toString().padStart(2, '0')}:00`) |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
tooltip: { |
||||
show: true, |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
|
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '今日', |
||||
data: Array.from(new Array(8).keys()).map(item => Math.round(Math.random() * 500)), |
||||
type: 'line', |
||||
label: { |
||||
show: true |
||||
} |
||||
}, |
||||
{ |
||||
name: '昨日', |
||||
data: Array.from(new Array(8).keys()).map(item => Math.round(Math.random() * 500)), |
||||
type: 'line', |
||||
label: { |
||||
show: true |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
|
||||
option && myChart.setOption(option); |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.core { |
||||
&>div { |
||||
border: 1px solid rgba($color: #000000, $alpha: 0.2); |
||||
border-radius: 10px; |
||||
text-align: center; |
||||
padding: 5px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-evenly; |
||||
|
||||
&>.big { |
||||
font-size: 18px; |
||||
|
||||
} |
||||
|
||||
&>.small { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.grid-container { |
||||
display: grid; |
||||
grid-template-columns: repeat(2, 1fr); |
||||
grid-template-rows: repeat(3, auto); |
||||
grid-gap: 10px; |
||||
height: 350px; |
||||
|
||||
|
||||
&>.grid-item { |
||||
border: 1px solid rgba($color: #000000, $alpha: 0.2); |
||||
border-radius: 10px; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.small { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.big { |
||||
font-size: 30px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.today-chart { |
||||
height: 400px; |
||||
} |
||||
|
||||
.bottom-chart { |
||||
height: 350px; |
||||
margin-top: 20px; |
||||
} |
||||
</style> |
Loading…
Reference in new issue