188 lines
5.0 KiB
HTML
188 lines
5.0 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/logo.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/logo.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: -56,
|
|
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> |