Miao-Yunzai/plugins/genshin/resources/html/ledgerCount/ledgerCount.html

187 lines
5.4 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/ledgerCount/ledgerCount.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">
<link rel="preload" href="{{pluResPath}}img/other/原神.png" as="image">
{{@headStyle}}
</head>
<body>
<div class="container" id="container">
<div class="head_box">
<div class="id_text">ID: {{uid}}</div>
<h2 class="day_text">{{yearText}}原石统计</h2>
<img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
</div>
<div class="data_box">
<div class="tab_lable">数据总览</div>
<div class="data_line">
<div class="data_line_item">
<div class="num">{{allPrimogemsShow}}</div>
<div class="lable">总原石</div>
</div>
<div class="data_line_item">
<div class="num">{{allGacha}}抽</div>
<div class="lable">总抽数</div>
</div>
<div class="data_line_item">
<div class="num">{{maxPrimogems.month}}月</div>
<div class="lable">原石最多</div>
</div>
<div class="data_line_item">
<div class="num">{{maxPrimogems.value}}</div>
<div class="lable">{{maxPrimogems.month}}月原石</div>
</div>
</div>
<div class="data_line">
<div class="data_line_item">
<div class="num">{{allMora}}</div>
<div class="lable">总摩拉</div>
</div>
<div class="data_line_item">
<div class="num">{{maxMora.month}}月</div>
<div class="lable">摩拉最多</div>
</div>
<div class="data_line_item">
{{if group_by.length>0 }}
<div class="num">{{group_by[0].num}}</div>
<div class="lable">{{group_by[0].action}}</div>
{{/if}}
</div>
<div class="data_line_item">
{{if group_by.length>0 }}
<div class="num">{{group_by[1].num}}</div>
<div class="lable">{{group_by[1].action}}</div>
{{/if}}
</div>
</div>
</div>
<div class="data_box">
<div class="tab_lable">月份统计</div>
<div id="chartContainer"></div>
</div>
<div class="data_box">
<div class="tab_lable">详细统计</div>
<div id="chartContainer2"></div>
</div>
{{if hasMore }}
<div class="hasMore">*该数据只显示最近12个月</div>
{{/if}}
<div class="logo">Created By Miao-Yunzai</div>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
const { Column, Pie } = G2Plot;
const primogemsMonth = JSON.parse(`{{@ primogemsMonth}}`);
const primogemsMax = {{maxPrimogems.value}};
const stackedColumnPlot = new Column("chartContainer", {
data: primogemsMonth,
isGroup: true,
xField: "month",
yField: "value",
seriesField: "name",
animation: false,
renderer: "svg",
padding: [40, 10, 30, 52],
label: {
position: "top",
style: {
fontFamily: "tttgbnumber",
},
offsetY: 10,
},
xAxis: {
label: {
autoHide: false,
formatter: (v) => {
return v + "月";
},
style: {
fontFamily: "tttgbnumber",
fontSize: 14,
},
},
},
yAxis: {
label: {
style: {
fontFamily: "tttgbnumber",
fontSize: 14,
},
},
},
});
stackedColumnPlot.render();
const countdata = JSON.parse(`{{@ pieData}}`);
const piePlot = new Pie("chartContainer2", {
renderer: "svg",
animation: false,
data: countdata,
appendPadding: 10,
angleField: "num",
colorField: "action",
radius: 1,
innerRadius: 0.7,
// appendPadding: 20,
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: -8,
content: "总计",
},
content: {
style: {
fontFamily: "tttgbnumber",
},
},
},
legend: {
offsetX:-16,
itemValue: {
formatter: (text, item) => {
const items = countdata.filter((d) => d.action === item.value)[0];
return items.num;
},
style: {
opacity: 0.65,
fontFamily: "tttgbnumber",
"fontSize": 16,
},
},
itemName:{
style: {
"fontSize": 16,
},
}
},
});
piePlot.render();
</script>
</html>