2022-07-26 10:07:31 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
|
|
<link rel="shortcut icon" href="#" />
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="ledger.css" />
|
|
|
|
|
|
<link rel="preload" href="../../fonts/tttgbnumber.ttf" as="font">
|
|
|
|
|
|
<link rel="preload" href="background/bg.webp" as="image">
|
|
|
|
|
|
<link rel="preload" href="background/chart.png" as="image">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container" id="container">
|
|
|
|
|
|
<div class="title-box">
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
<div class="uid">ID：{{uid}}</div>
|
|
|
|
|
|
<div class="month">{{day}}月札记</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img class="genshin_logo" src="../../bot/help/background/genshin.png" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="data-box">
|
|
|
|
|
|
<div class="month">
|
|
|
|
|
|
<div class="head">当月获取：</div>
|
|
|
|
|
|
<div class="primogems">
|
|
|
|
|
|
<div class="icon-ys"></div>
|
|
|
|
|
|
<div class="text">原石：{{ current_primogems }} | {{ gacha }} 抽</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="primogems">
|
|
|
|
|
|
<div class="icon-mola"></div>
|
|
|
|
|
|
<div class="text">摩拉：{{ current_mora }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="day">
|
|
|
|
|
|
<div class="head">上月获取：</div>
|
|
|
|
|
|
<div class="primogems">
|
|
|
|
|
|
<div class="icon-ys"></div>
|
|
|
|
|
|
<div class="text">原石：{{ last_primogems }} | {{ last_gacha }} 抽</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="primogems">
|
|
|
|
|
|
<div class="icon-mola"></div>
|
|
|
|
|
|
<div class="text">摩拉：{{ 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">
|
|
|
|
|
|
{% for category in categories %}
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<i style="background: {{ category.color }}"></i>
|
|
|
|
|
|
<span class="action">{{ category.name }}</span> <em>{{ category.percentage }}%</em><span class="num">{{ category.amount }}</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" src="g2plot.min.js"></script>
|
2022-10-12 13:39:47 +00:00
|
|
|
|
<script>
|
|
|
|
|
|
const { Pie } = G2Plot;
|
|
|
|
|
|
const data = {{ categories | tojson }};
|
|
|
|
|
|
const color = {{ color | tojson }};
|
|
|
|
|
|
const piePlot = new Pie("chartContainer", {
|
|
|
|
|
|
renderer: "svg",
|
|
|
|
|
|
animation: false,
|
|
|
|
|
|
data,
|
|
|
|
|
|
appendPadding: 10,
|
|
|
|
|
|
angleField: "amount",
|
|
|
|
|
|
colorField: "name",
|
|
|
|
|
|
radius: 1,
|
|
|
|
|
|
innerRadius: 0.7,
|
|
|
|
|
|
color,
|
|
|
|
|
|
meta: {},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
type: "inner",
|
|
|
|
|
|
offset: "-50%",
|
|
|
|
|
|
autoRotate: false,
|
2022-07-26 10:07:31 +00:00
|
|
|
|
style: {
|
2022-10-12 13:39:47 +00:00
|
|
|
|
textAlign: "center",
|
2022-07-26 10:07:31 +00:00
|
|
|
|
fontFamily: "tttgbnumber",
|
|
|
|
|
|
},
|
2022-10-12 13:39:47 +00:00
|
|
|
|
formatter: ({ percentage }) => {
|
|
|
|
|
|
return percentage > 2 ? `${percentage}%` : "";
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
statistic: {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
offsetY: -18,
|
|
|
|
|
|
content: "总计",
|
|
|
|
|
|
},
|
|
|
|
|
|
content: {
|
|
|
|
|
|
offsetY: -10,
|
|
|
|
|
|
style: {
|
|
|
|
|
|
fontFamily: "tttgbnumber",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2022-07-26 10:07:31 +00:00
|
|
|
|
},
|
2022-10-12 13:39:47 +00:00
|
|
|
|
legend:false,
|
|
|
|
|
|
});
|
|
|
|
|
|
piePlot.render();
|
|
|
|
|
|
</script>
|
2022-07-26 10:07:31 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
