131 lines
3.5 KiB
HTML
131 lines
3.5 KiB
HTML
{{extend genshinLayout}}
|
|
|
|
{{block 'css'}}
|
|
<link rel="stylesheet" type="text/css" href="{{_res_path}}html/ledger/ledger-sr.css"/>
|
|
<link rel="preload" href="{{_res_path}}script/g2plot.min.js" as="script"/>
|
|
{{/block}}
|
|
|
|
{{block 'main'}}
|
|
<div class="container">
|
|
<div class="title">
|
|
<div class="uid">
|
|
<div class="uid_item"><span class="uid_text">UID:</span><span class="uid_span">{{uid}}</span>
|
|
</div>
|
|
<div class="uid_item"><span class="day_span">开拓月历·{{day}}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="title_date">
|
|
<div class="icon">
|
|
<img src="{{_res_path}}StarRail/img/role/{{icon}}"/>
|
|
</div>
|
|
<div class="title_date_text">
|
|
<div>{{nowDay}}</div>
|
|
<div>{{srday}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="subject">
|
|
<div class="subject_solid"><span style="width: {{bfStamina}};"></span></div>
|
|
<div class="data-box">
|
|
<div class="month">
|
|
<div class="head">当月获取：</div>
|
|
<div class="primogems">
|
|
<div class="icon-ys"></div>
|
|
<div class="text">星琼：{{month_data.current_hcoin}} | {{month_data.gacha}} 抽</div>
|
|
</div>
|
|
<div class="primogems">
|
|
<div class="icon-mola"></div>
|
|
<div class="text">专&通票：{{month_data.current_rails_pass}} 张</div>
|
|
</div>
|
|
</div>
|
|
<div class="day">
|
|
<div class="head">上月获取：</div>
|
|
<div class="primogems">
|
|
<div class="icon-ys"></div>
|
|
<div class="text">星琼：{{month_data.last_hcoin}} | {{month_data.last_gacha}} 抽</div>
|
|
</div>
|
|
<div class="primogems">
|
|
<div class="icon-mola"></div>
|
|
<div class="text">专&通票：{{month_data.last_rails_pass}} 张</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="title_wt">
|
|
<div>
|
|
星琼收入统计
|
|
</div>
|
|
</div>
|
|
<div class="chart-box">
|
|
<div class="chart-info">
|
|
<div id="chartContainer"></div>
|
|
<ul class="tooltip">
|
|
{{each month_data.group_by val}}
|
|
<li>
|
|
<i style="background: {{val.color}}"></i>
|
|
<span class="action"><em>{{val.action_name}}</em></span> <span
|
|
class="num"><em>{{val.num}}</em></span><span
|
|
class="percent"><em>{{val.percent}}%</em></span>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="{{_res_path}}script/g2plot.min.js"></script>
|
|
<script>
|
|
const { Pie } = G2Plot
|
|
const data = JSON.parse(`{{@ group_by}}`)
|
|
const piePlot = new Pie('chartContainer', {
|
|
renderer: 'svg',
|
|
animation: false,
|
|
data: data,
|
|
appendPadding: 10,
|
|
angleField: 'num',
|
|
colorField: 'action_name',
|
|
radius: 1,
|
|
innerRadius: 0.7,
|
|
color: JSON.parse(`{{@ color}}`),
|
|
meta: {
|
|
// num: {
|
|
// formatter: (v) => `${v}`,
|
|
// },
|
|
},
|
|
label: {
|
|
type: 'inner',
|
|
offset: '-50%',
|
|
autoRotate: false,
|
|
style: {
|
|
textAlign: 'center',
|
|
fontFamily: 'tttgbnumber',
|
|
'fontSize': 24
|
|
},
|
|
formatter: ({ percent }) => {
|
|
percent = (percent * 100).toFixed(0)
|
|
return percent > 2 ? `${percent}%` : ''
|
|
}
|
|
},
|
|
statistic: {
|
|
title: {
|
|
offsetY: -18,
|
|
content: '总计',
|
|
style: {
|
|
fontFamily: 'tttgbnumber',
|
|
'fontSize': 32
|
|
}
|
|
},
|
|
content: {
|
|
offsetY: -10,
|
|
style: {
|
|
fontFamily: 'tttgbnumber',
|
|
'fontSize': 48
|
|
}
|
|
}
|
|
},
|
|
legend: false
|
|
})
|
|
piePlot.render()
|
|
</script>
|
|
|
|
{{/block}}
|