Miao-Yunzai/plugins/genshin/resources/StarRail/html/ledger/ledger.html

138 lines
4.7 KiB
HTML

<!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="{{pluResPath}}html/ledger/ledger.css" />
<link rel="preload" href="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js" as="script" />
<link rel="preload" href="{{resPath}}font/tttgbnumber.ttf" as="font">
</head>
<body id="container">
<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="{{pluResPath}}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 class="logo"> Created By Miao-Yunzai</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/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>
</html>