176 lines
4.5 KiB
HTML
176 lines
4.5 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/payLog/payLog.css"
|
|
/>
|
|
<link rel="preload" href="{{resPath}}font/tttgbnumber.ttf" as="font" />
|
|
<link
|
|
rel="preload"
|
|
href="{{pluResPath}}img/namecard/{{headImg}}.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">充值统计</h2>
|
|
<img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
|
|
</div>
|
|
<div class="data_box">
|
|
<div class="tab_lable">数据总览</div>
|
|
<div class="data_line">
|
|
{{each topData.slice(0,4) data}}
|
|
<div class="data_line_item">
|
|
<div class="num">{{data.value}}</div>
|
|
<div class="lable">{{data.title}}</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
<div class="data_line">
|
|
{{each topData.slice(4,8) data}}
|
|
<div class="data_line_item">
|
|
<div class="num">{{data.value}}</div>
|
|
<div class="lable">{{data.title}}</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
<div class="data_line">
|
|
{{each topData.slice(8,12) data}}
|
|
<div class="data_line_item">
|
|
<div class="num">{{data.value}}</div>
|
|
<div class="lable">{{data.title}}</div>
|
|
</div>
|
|
{{/each}}
|
|
</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">Created By {{yzName}} & seven-plugin</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="{{pluResPath}}html/payLog/echarts.min.js"></script>
|
|
|
|
<script>
|
|
const barData = JSON.parse(`{{@ barData}}`)
|
|
var myChart1 = echarts.init(
|
|
document.querySelector('#chartContainer'),
|
|
null,
|
|
{ renderer: 'svg' }
|
|
)
|
|
const xData = barData.map(v => v.type)
|
|
const yData = barData.map(v => v.sales)
|
|
// 指定图表的配置项和数据
|
|
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 = JSON.parse(`{{@ pieData}}`)
|
|
const myChart2 = echarts.init(
|
|
document.querySelector('#chartContainer2'),
|
|
null,
|
|
{ renderer: 'svg' }
|
|
)
|
|
const option2 = {
|
|
animation: false,
|
|
title: {
|
|
text: '{{topData[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>
|