PamGram/resources/starrail/ledger/ledger.html
2023-04-26 21:26:20 +08:00

105 lines
3.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
</div>
<div class="data-box">
<div class="month">
<div class="head">当月获取:</div>
<div class="primogems">
<div class="icon-xq"></div>
<div class="text">星琼:{{ current_hcoin }} | {{ gacha }} 抽</div>
</div>
<div class="primogems">
<div class="icon-ticket"></div>
<div class="text">星琼通/专票:{{ current_rails_pass }}</div>
</div>
</div>
<div class="day">
<div class="head">上月获取:</div>
<div class="primogems">
<div class="icon-xq"></div>
<div class="text">星琼:{{ last_hcoin }} | {{ last_gacha }} 抽</div>
</div>
<div class="primogems">
<div class="icon-ticket"></div>
<div class="text">星琼通/专票:{{ last_rails_pass }}</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>
<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,
style: {
textAlign: "center",
fontFamily: "tttgbnumber",
},
formatter: ({ percentage }) => {
return percentage > 2 ? `${percentage}%` : "";
},
},
statistic: {
title: {
offsetY: -18,
content: "总计",
},
content: {
offsetY: -10,
style: {
fontFamily: "tttgbnumber",
},
},
},
legend:false,
});
piePlot.render();
</script>
</body>
</html>