457 lines
13 KiB
HTML
457 lines
13 KiB
HTML
{layout name="layout1" /}
|
|
<style>
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.flexc{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.t1{
|
|
background: #4A70F4;
|
|
}
|
|
.t2{
|
|
background: #F6A23F;
|
|
}
|
|
.t3{
|
|
background: #6DD047;
|
|
}
|
|
.t4{
|
|
background: #F07AAF;
|
|
}
|
|
.t-i{
|
|
background: #fff;
|
|
padding:20px 15px;
|
|
}
|
|
.t-i-img{
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
}
|
|
.t-i-img img{
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.h2{
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
color: #000;
|
|
}
|
|
.span{
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
.c-i{
|
|
background: #fff;
|
|
padding: 15px;
|
|
height: 500px;
|
|
}
|
|
|
|
</style>
|
|
<div class="layui-fluid" style="">
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
|
<div class="layui-col-sm12">
|
|
<div class="t-i" style="padding:15px 0;">
|
|
<label class="layui-form-label" style="padding:5px 15px;width:auto">按年统计</label>
|
|
<div class="layui-input-inline">
|
|
<input style="height:30px" type="text" value="2025" class="layui-input" id="test2" placeholder="yyyy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-sm3">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t1">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="zdd">0</div>
|
|
<span class="span">总订单量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm3 ">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t2">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="xse">0</div>
|
|
<span class="span">销售额</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm3 ">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t3">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="ys">0</div>
|
|
<span class="span">已收账款</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm3 ">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t4">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="ys2">0</div>
|
|
<span class="span">应收账款</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--表格-->
|
|
<div class="layui-col-sm12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
年销售额
|
|
<div class="layadmin-dataview">
|
|
<div id="sale-charts" style="width: 100%;height: 100%">
|
|
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-sm12">
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-right:7px">
|
|
<div id="c1" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-left:7px">
|
|
<div id="c2" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" charset="utf-8" src="/static/webjs/echarts.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="/static/webjs/jquery.min.js"></script>
|
|
<script>
|
|
|
|
var sale_option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10','11月','12月']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [0,0,0,0,0,0,0,0,0,0,0,0],
|
|
type: 'bar'
|
|
}
|
|
]
|
|
};
|
|
|
|
var c1_option = {
|
|
title: {
|
|
text: '销售占比',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
var c1_charts= echarts.init(document.getElementById('c1'));
|
|
c1_charts.setOption(c1_option, true);
|
|
|
|
|
|
var c2_option = {
|
|
title: {
|
|
text: '销量排行'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['', '', '', '', '', '']
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: [0, 0, 0, 0, 0, 0]
|
|
}
|
|
]
|
|
};
|
|
|
|
var c2_charts= echarts.init(document.getElementById('c2'));
|
|
c2_charts.setOption(c2_option, true);
|
|
|
|
|
|
|
|
function getyear(year = null){
|
|
$.post('order_chart',{date:year},function(e){
|
|
var d = e.data
|
|
$('#zdd').html(d.zdd)
|
|
$('#xse').html(d.xse)
|
|
$('#ys').html(d.ys)
|
|
$('#ys2').html(d.ys2)
|
|
|
|
sale_option.series[0].data = d.yxse.data
|
|
var sale_charts= echarts.init(document.getElementById('sale-charts'));
|
|
sale_charts.setOption(sale_option, true);
|
|
|
|
|
|
c2_option.series[0].data = d.xlph.data.data.reverse()
|
|
c2_option.yAxis.data = d.xlph.data.goods.reverse()
|
|
var c2_charts= echarts.init(document.getElementById('c2'));
|
|
c2_charts.setOption(c2_option, true);
|
|
|
|
c1_option.series[0].data = d.xszb.data
|
|
var c1_charts= echarts.init(document.getElementById('c1'));
|
|
c1_charts.setOption(c1_option, true);
|
|
|
|
})
|
|
}
|
|
getyear()
|
|
|
|
layui.config({
|
|
version:"{$front_version}",
|
|
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'like','form','element','laydate'], function () {
|
|
var $ = layui.$
|
|
,like = layui.like
|
|
var laydate = layui.laydate;
|
|
|
|
//年选择器
|
|
laydate.render({
|
|
elem: '#test2'
|
|
,type: 'year'
|
|
,done: function(value, date){
|
|
getyear(value)
|
|
}
|
|
});
|
|
|
|
|
|
let bgColor = "#fff";
|
|
let color = [
|
|
"#0090FF",
|
|
"#36CE9E",
|
|
"#FFC005",
|
|
"#FF515A",
|
|
"#8B5CFF",
|
|
"#00CA69"
|
|
];
|
|
const hexToRgba = (hex, opacity) => {
|
|
let rgbaColor = "";
|
|
let reg = /^#[\da-f]{6}$/i;
|
|
if (reg.test(hex)) {
|
|
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
|
"0x" + hex.slice(3, 5)
|
|
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
|
}
|
|
return rgbaColor;
|
|
}
|
|
|
|
|
|
|
|
like.ajax({
|
|
url: '{:url("index/stat")}',
|
|
type: "get",
|
|
success: function (res) {
|
|
|
|
var dates = res.data.dates,
|
|
echarts_order_amount = res.data.echarts_order_amount,
|
|
echarts_user_visit = res.data.echarts_user_visit;
|
|
|
|
|
|
|
|
var user_option = {
|
|
backgroundColor: bgColor,
|
|
color: color,
|
|
legend: {
|
|
right: 10,
|
|
top: 10
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: function(params) {
|
|
let html = '';
|
|
params.forEach(v => {
|
|
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
|
${v.name}
|
|
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
|
人`;
|
|
})
|
|
return html
|
|
},
|
|
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
shadowStyle: {
|
|
color: '#ffffff',
|
|
shadowColor: 'rgba(225,225,225,1)',
|
|
shadowBlur: 5
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
top: 100,
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
textStyle: {
|
|
color: "#333"
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#D9D9D9"
|
|
}
|
|
},
|
|
data: dates
|
|
}],
|
|
yAxis: [{
|
|
type: "value",
|
|
name: '用户访问量',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#666"
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
color: "#666",
|
|
fontSize: 12,
|
|
lineHeight: 40
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#E9E9E9"
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [{
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[0],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[0], 0.5),
|
|
shadowOffsetY: 8
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[{
|
|
offset: 0,
|
|
color: hexToRgba(color[0], 0.3)
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[0], 0.1)
|
|
}
|
|
],
|
|
false
|
|
),
|
|
shadowColor: hexToRgba(color[0], 0.1),
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
data: echarts_user_visit
|
|
}]
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|