数据统计-实时数据

master
panqihua 2 years ago
parent 8d7bd3b4d1
commit 69859d9ebe
  1. 310
      src/views/platform/data_statistics/real_time_data.vue

@ -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…
Cancel
Save