112 lines
2.9 KiB
HTML
112 lines
2.9 KiB
HTML
{{extend defaultLayout}} {{block 'css'}}
|
||
<link
|
||
rel="stylesheet"
|
||
type="text/css"
|
||
href="{{_res_path}}html/ledger/ledger-gs.css"
|
||
/>
|
||
<link rel="preload" href="{{_res_path}}script/g2plot.min.js" as="script" />
|
||
<link rel="preload" href="{{_res_path}}img/other/bg.webp" as="image" />
|
||
<link rel="preload" href="{{_res_path}}img/other/chart.png" as="image" />
|
||
{{/block}} {{block 'main'}}
|
||
<div class="title-box">
|
||
<div class="info">
|
||
<div class="uid">ID：{{uid}}</div>
|
||
<div class="month">{{day}}札记</div>
|
||
</div>
|
||
<img class="genshin_logo" src="{{_res_path}}img/other/原神.png" />
|
||
</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_primogems}} | {{month_data.gacha}} 抽
|
||
</div>
|
||
</div>
|
||
<div class="primogems">
|
||
<div class="icon-mola"></div>
|
||
<div class="text">摩拉：{{month_data.current_mora}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="day">
|
||
<div class="head">上月获取：</div>
|
||
<div class="primogems">
|
||
<div class="icon-ys"></div>
|
||
<div class="text">
|
||
原石：{{month_data.last_primogems}} | {{month_data.last_gacha}} 抽
|
||
</div>
|
||
</div>
|
||
<div class="primogems">
|
||
<div class="icon-mola"></div>
|
||
<div class="text">摩拉：{{month_data.last_mora}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart-box">
|
||
<div class="head">原石收入组成：</div>
|
||
<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">{{val.action}}</span> <em>{{val.percent}}%</em
|
||
><span class="num">{{val.num}}</span>
|
||
</li>
|
||
{{/each}}
|
||
</ul>
|
||
</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',
|
||
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'
|
||
},
|
||
formatter: ({ percent }) => {
|
||
percent = (percent * 100).toFixed(0)
|
||
return percent > 2 ? `${percent}%` : ''
|
||
}
|
||
},
|
||
statistic: {
|
||
title: {
|
||
offsetY: -18,
|
||
content: '总计'
|
||
},
|
||
content: {
|
||
offsetY: -10,
|
||
style: {
|
||
fontFamily: 'tttgbnumber'
|
||
}
|
||
}
|
||
},
|
||
legend: false
|
||
})
|
||
piePlot.render()
|
||
</script>
|
||
|
||
{{/block}}
|