|
|
|
@ -67,12 +67,12 @@ |
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<div class="center-card">折合新币累计金额</div> |
|
|
|
<el-image :src="svg1" style="width: 68px; display: block;margin: 0 auto;"/> |
|
|
|
<el-image :src="svg1" style="width: 88px; display: block;margin: 0 auto;"/> |
|
|
|
<div class="center-card">{{ yearlyMoney / 100 }}新币</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 120px"> |
|
|
|
<el-col :span="12" style="border-left: 2px solid #CFE6FE; height: 160px"> |
|
|
|
<div class="center-card" style="white-space: nowrap;">昨日新增金币:{{ recharge / 100 }}</div> |
|
|
|
<div ref="rechargeGoldChart" style="width: 68px; height: 68px; display: block;margin: 0 auto;"></div> |
|
|
|
<div ref="rechargeGoldChart" style="width: 88px; height: 88px; display: block;margin: 0 auto;"></div> |
|
|
|
<div class="center-card" style="white-space: nowrap;">其中永久金币:{{ money / 100 }}</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
@ -88,10 +88,10 @@ |
|
|
|
<div class="card-title">全年累计消费金币数:{{ yearlyReduce / 100 }}</div> |
|
|
|
<el-row style="height: 200px;"> |
|
|
|
<el-col :span="12"> |
|
|
|
<div ref="consumeChart" style="width:100%; height: 68%;"></div> |
|
|
|
<div ref="consumeChart" style="width:100%; height: 88%;"></div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<div ref="consumeDetailChart" style="width: 100%; height: 88%;"></div> |
|
|
|
<div ref="consumeDetailChart" style="width: 100%; height: 108%;"></div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -101,16 +101,16 @@ |
|
|
|
<div class="card-item" > |
|
|
|
<div class="card-title">全年累计充值人头数:{{ yearlyRechargeNum }}</div> |
|
|
|
<el-row style="height: 200px;"> |
|
|
|
<el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 150px"> |
|
|
|
<el-col :span="12" style="border-right: 2px solid #CFE6FE; height: 200px"> |
|
|
|
<div class="chart5"> |
|
|
|
<el-image :src="svg2" style="width: 68px; display: block;margin: 0 auto;"/> |
|
|
|
<el-image :src="svg2" style="width: 88px; display: block;margin: 0 auto;"/> |
|
|
|
<div class="margin-bottom"> |
|
|
|
<div style="display: flex; gap: 10px; font-size: 14px;">周同比:{{ sumWow }}% |
|
|
|
<div style="display: flex; gap: 10px; font-size: 16px;">周同比:{{ sumWow }}% |
|
|
|
<el-image v-if="sumWow > 0" :src="upArrow" style="width: 10px;"/> |
|
|
|
<el-image v-else-if="sumWow < 0" :src="downArrow" style="width: 10px;"/> |
|
|
|
<el-image v-else :src="pingArrow" style="width: 10px;"/> |
|
|
|
</div> |
|
|
|
<div style="display: flex; gap: 10px; font-size: 14px;"> |
|
|
|
<div style="display: flex; gap: 10px; font-size: 16px;"> |
|
|
|
日环比:{{ sumDaily }}% |
|
|
|
<el-image v-if="sumDaily > 0" :src="upArrow" style="width: 10px;"/> |
|
|
|
<el-image v-else-if="sumDaily < 0" :src="downArrow" style="width: 10px;"/> |
|
|
|
@ -124,7 +124,7 @@ |
|
|
|
</el-col> |
|
|
|
<!-- 新增的环形图容器 --> |
|
|
|
<el-col :span="12"> |
|
|
|
<div ref="rechargePeopleChart" style="width:100%; height: 68%;"></div> |
|
|
|
<div ref="rechargePeopleChart" style="width:100%; height: 88%;"></div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -362,11 +362,16 @@ const initConsumeChart = () => { |
|
|
|
const myChart = echarts.init(consumeChart.value); |
|
|
|
const option = { |
|
|
|
legend: { |
|
|
|
textStyle: { |
|
|
|
fontSize: 15, |
|
|
|
color: '#000', |
|
|
|
fontFamily: 'PingFang SC' |
|
|
|
}, |
|
|
|
orient: 'vertical', |
|
|
|
left: '10%', |
|
|
|
top: '85', |
|
|
|
left: '15%', |
|
|
|
top: '105', |
|
|
|
icon: 'circle', |
|
|
|
iconSize: 5, |
|
|
|
iconSize: 7, |
|
|
|
textSize: 12, |
|
|
|
itemWidth: 7, |
|
|
|
itemHeight: 7, |
|
|
|
@ -376,7 +381,7 @@ const initConsumeChart = () => { |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['30%', '45%'], |
|
|
|
center: ['50%', '35%'], |
|
|
|
center: ['50%', '30%'], |
|
|
|
silent: true, |
|
|
|
clockwise: true, |
|
|
|
label: {show: false}, |
|
|
|
@ -406,9 +411,14 @@ const initConsumeDetailChart = () => { |
|
|
|
const option = { |
|
|
|
// 增加图表内边距,避免内容溢出 |
|
|
|
legend: { |
|
|
|
textStyle: { |
|
|
|
fontSize: 15, |
|
|
|
color: '#000', |
|
|
|
fontFamily: 'PingFang SC' |
|
|
|
}, |
|
|
|
orient: 'vertical', |
|
|
|
left: '20%', |
|
|
|
top: '85', |
|
|
|
left: '10%', |
|
|
|
top: '105', |
|
|
|
icon: 'circle', |
|
|
|
iconSize: 5, |
|
|
|
itemWidth: 7, |
|
|
|
@ -464,12 +474,16 @@ const initRechargePeopleChart = () => { |
|
|
|
const myChart = echarts.init(rechargePeopleChart.value); |
|
|
|
const option = { |
|
|
|
legend: { |
|
|
|
textStyle: { |
|
|
|
fontSize: 15, |
|
|
|
color: '#000', |
|
|
|
fontFamily: 'PingFang SC' |
|
|
|
}, |
|
|
|
orient: 'vertical', |
|
|
|
left: '20%', |
|
|
|
top: '85', |
|
|
|
top: '110', |
|
|
|
icon: 'circle', |
|
|
|
iconSize: 5, |
|
|
|
textSize: 18, |
|
|
|
itemWidth: 7, |
|
|
|
itemHeight: 7, |
|
|
|
}, |
|
|
|
@ -477,7 +491,7 @@ const initRechargePeopleChart = () => { |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['30%', '50%'], |
|
|
|
center: ['50%', '35%'], |
|
|
|
center: ['50%', '30%'], |
|
|
|
silent: true, |
|
|
|
clockwise: true, |
|
|
|
label: {show: false}, |
|
|
|
@ -492,7 +506,7 @@ const initRechargePeopleChart = () => { |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['30%', '45%'], |
|
|
|
center: ['50%', '35%'], |
|
|
|
center: ['50%', '30%'], |
|
|
|
silent: true, |
|
|
|
clockwise: true, |
|
|
|
label: {show: false}, |
|
|
|
@ -552,7 +566,7 @@ onMounted(async () => { |
|
|
|
} |
|
|
|
|
|
|
|
.card-item-row1 { |
|
|
|
height: 160px; |
|
|
|
height: 200px; |
|
|
|
width: auto; |
|
|
|
background: #E4F0FC; |
|
|
|
box-shadow: 0 0 4px 0 #00000040; |
|
|
|
@ -566,7 +580,7 @@ onMounted(async () => { |
|
|
|
|
|
|
|
|
|
|
|
.card-item { |
|
|
|
height: 200px; |
|
|
|
height: 240px; |
|
|
|
width: auto; |
|
|
|
background: #E4F0FC; |
|
|
|
box-shadow: 0 0 4px 0 #00000040; |
|
|
|
@ -581,6 +595,7 @@ onMounted(async () => { |
|
|
|
.card-title { |
|
|
|
font-weight: bold; |
|
|
|
height: 36px; |
|
|
|
font-size: 17px; |
|
|
|
width: 100%; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 8px; |
|
|
|
@ -645,7 +660,7 @@ onMounted(async () => { |
|
|
|
.gold-management { |
|
|
|
margin: 10px 5px; |
|
|
|
width: 100%; |
|
|
|
height: 50vh; |
|
|
|
height: 550px; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 8px; |
|
|
|
background: #E7F4FD; |
|
|
|
|