panqihua
/
ttsbg-java-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据统计-实时数据

Browse Source
master
panqihua 2 years ago
parent 8d7bd3b4d1
commit 69859d9ebe
1 changed files with 310 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 310
      src/views/platform/data_statistics/real_time_data.vue

310
src/views/platform/data_statistics/real_time_data.vue
Unescape View File

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