mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-11-27 18:31:25 +00:00
155 lines
3.9 KiB
Django/Jinja
155 lines
3.9 KiB
Django/Jinja
<!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="pay_log.css" />
|
|
<link rel="preload" href="../../fonts/tttgbnumber.ttf" as="font">
|
|
<style>
|
|
.head_box {
|
|
background: #fff url('{{ name_card }}') no-repeat right center;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
<title></title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="container">
|
|
<div class="head_box">
|
|
<div class="id_text">ID: {{ uid }}</div>
|
|
<h2 class="day_text">充值统计</h2>
|
|
<img class="genshin_logo" src="./../../bot/help/background/genshin.png" alt=""/>
|
|
</div>
|
|
<div class="data_box">
|
|
<div class="tab_lable">数据总览</div>
|
|
<div class="data_line">
|
|
{% for data in datas[:4] %}
|
|
<div class="data_line_item">
|
|
<div class="num">{{ data.value }}</div>
|
|
<div class="lable">{{ data.name }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="data_line">
|
|
{% for data in datas[4:8] %}
|
|
<div class="data_line_item">
|
|
<div class="num">{{ data.value }}</div>
|
|
<div class="lable">{{ data.name }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="data_line">
|
|
{% for data in datas[8:] %}
|
|
<div class="data_line_item">
|
|
<div class="num">{{ data.value }}</div>
|
|
<div class="lable">{{ data.name }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</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>
|
|
<div class="logo"> Template By Yunzai-Bot & seven-plugin</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="echarts.min.js"></script>
|
|
|
|
<script>
|
|
const barData = {{ bar_data | tojson }};
|
|
const myChart1 = echarts.init(document.querySelector('#chartContainer'), null, {renderer: 'svg'});
|
|
const xData = barData.map(v => v.month)
|
|
const yData = barData.map(v => v.amount)
|
|
const option = {
|
|
animation: false,
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData
|
|
},
|
|
legend: {
|
|
x:'left',
|
|
y:'top',
|
|
show: true,
|
|
data: [{ name: '结晶' }]
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name:'结晶',
|
|
data: yData,
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
position: 'top',
|
|
show: true,
|
|
textStyle: {
|
|
color: '#1e1f20',
|
|
fontSize: 14,
|
|
fontFamily: "tttgbnumber",
|
|
}
|
|
},
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
offset: 0,
|
|
color: "#1268f3"
|
|
}, {
|
|
offset: 0.6,
|
|
color: "#08a4fa"
|
|
}, {
|
|
offset: 1,
|
|
color: "#01ccfe"
|
|
}], false)
|
|
},
|
|
|
|
},
|
|
}
|
|
]
|
|
};
|
|
myChart1.setOption(option);
|
|
|
|
const pieData = {{ pie_data | tojson }};
|
|
const myChart2 = echarts.init(document.querySelector('#chartContainer2'), null, { renderer: 'svg' });
|
|
const option2 = {
|
|
animation: false,
|
|
title: {
|
|
text: '{{ datas[0].value }}',
|
|
subtext: '总充值',
|
|
left: 'right'
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
fontFamily: "tttgbnumber",
|
|
formatter: '{b}:￥{c} ({d}%)'
|
|
},
|
|
labelLine: { show: true }
|
|
}
|
|
},
|
|
data: pieData,
|
|
}
|
|
]
|
|
};
|
|
myChart2.setOption(option2);
|
|
</script>
|
|
|
|
</html>
|