添加网站文件
This commit is contained in:
471
application/admin/view/statistics/deal.html
Normal file
471
application/admin/view/statistics/deal.html
Normal file
@@ -0,0 +1,471 @@
|
||||
{layout name="layout1" /}
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-fluid">
|
||||
|
||||
<div class="layui-form" lay-filter="">
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-input-inline">
|
||||
<div class="layui-card-header" >概况</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-input-inline" style="left: 50px">
|
||||
<div class="layui-input-inline">
|
||||
<select name="city" lay-verify="required" lay-filter="days">
|
||||
<option value="today" >今日实时</option>
|
||||
<option value="ago_seven" >近7天</option>
|
||||
<option value="ago_fifteen" >近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
|
||||
{$res.start} 至 {$res.end}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
订单金额
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font" id="order_amount">{$res.order_amount}</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
订单数量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font" id="order_num">{$res.order_num}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3" >
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-header" >
|
||||
商家售后单数量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list" >
|
||||
<p class="layuiadmin-big-font" id="after_num">{$res.after_num}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-card" style="margin-top:20px">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline layui-card-header" style="">交易趋势分析</div>
|
||||
<div class="layui-input-inline" style="right: 100px">
|
||||
<select lay-verify="required" lay-filter="deal">
|
||||
<option value="ago_seven">近7天</option>
|
||||
<option value="ago_fifteen">近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" id="deal_days" style="white-space: nowrap;top:8px;right:80px">
|
||||
{$res.start_seven} 至 {$res.end_seven}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div id="dealCharts" style="width: 100%;height: 80vh;"> </div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div id="amountCharts" style="width: 100%;height: 80vh;"> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
layui.config({
|
||||
version:"{$front_version}",
|
||||
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index','table','like','echarts','form'], function(){
|
||||
var $ = layui.$
|
||||
,form = layui.form
|
||||
,like = layui.like
|
||||
,echarts = layui.echarts;
|
||||
|
||||
const color = ["#0090FF","#00CA69","#FFC005",];
|
||||
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("statistics/deal")}',
|
||||
data: {deal:'ago_seven'},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
var xData = res.data.days;
|
||||
var orderNum = res.data.echarts_order_num;
|
||||
var afterNUm = res.data.echarts_after_num;
|
||||
var orderAmount = res.data.echarts_order_amount;
|
||||
|
||||
var numOption = setNumOption(xData, orderNum, afterNUm);
|
||||
var dealCharts = echarts.init(document.getElementById('dealCharts'));
|
||||
dealCharts.setOption(numOption, true);
|
||||
window.addEventListener('resize', function () {
|
||||
dealCharts.resize()
|
||||
});
|
||||
|
||||
var amountOption = setAmountOption(xData, orderAmount);
|
||||
var amountCharts = echarts.init(document.getElementById('amountCharts'));
|
||||
amountCharts.setOption(amountOption, true);
|
||||
window.addEventListener('resize', function () {
|
||||
amountCharts.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
form.on('select(deal)', function(data){
|
||||
like.ajax({
|
||||
url: '{:url("statistics/deal")}',
|
||||
data: {deal:data.value},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
$('#deal_days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
var xData = res.data.days;
|
||||
var orderNum = res.data.echarts_order_num;
|
||||
var afterNUm = res.data.echarts_after_num;
|
||||
var orderAmount = res.data.echarts_order_amount;
|
||||
|
||||
var numOption = setNumOption(xData, orderNum, afterNUm);
|
||||
var dealCharts = echarts.init(document.getElementById('dealCharts'));
|
||||
dealCharts.setOption(numOption, true);
|
||||
window.addEventListener('resize', function () {
|
||||
dealCharts.resize()
|
||||
});
|
||||
|
||||
var amountOption = setAmountOption(xData, orderAmount);
|
||||
var amountCharts = echarts.init(document.getElementById('amountCharts'));
|
||||
amountCharts.setOption(amountOption, true);
|
||||
window.addEventListener('resize', function () {
|
||||
amountCharts.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
form.on('select(days)', function(data){
|
||||
like.ajax({
|
||||
url:'{:url("statistics/deal")}',
|
||||
data:{'days':data.value},
|
||||
type:"post",
|
||||
success:function(res)
|
||||
{
|
||||
$('#days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
$('#order_amount').html(res.data.order_amount);
|
||||
$('#order_num').html(res.data.order_num);
|
||||
$('#after_num').html(res.data.after_num);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//图表设置
|
||||
function setNumOption(xData, orderData, afterData) {
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
color: color,
|
||||
legend: {
|
||||
top: 20,
|
||||
},
|
||||
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.seriesName}${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${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",
|
||||
name: '(天)',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9"
|
||||
}
|
||||
},
|
||||
data: xData,
|
||||
}],
|
||||
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: [{
|
||||
name: "订单数量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
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: orderData
|
||||
}, {
|
||||
name: "售后单数量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: afterData
|
||||
}]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
function setAmountOption(xData, amountData) {
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
color: color,
|
||||
legend: {
|
||||
top: 20,
|
||||
},
|
||||
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.seriesName}${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${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",
|
||||
name: '(天)',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9"
|
||||
}
|
||||
},
|
||||
data: xData,
|
||||
}],
|
||||
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: [{
|
||||
name: "订单金额",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
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: amountData
|
||||
}]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
370
application/admin/view/statistics/goods.html
Normal file
370
application/admin/view/statistics/goods.html
Normal file
@@ -0,0 +1,370 @@
|
||||
{layout name="layout1" /}
|
||||
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-fluid">
|
||||
|
||||
<div class="layui-form" lay-filter="">
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-input-inline">
|
||||
<div class="layui-card-header" >概况</div>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="left: 50px">
|
||||
<div class="layui-input-inline">
|
||||
<select name="city" lay-verify="required" lay-filter="days">
|
||||
<option value="today" >今日实时</option>
|
||||
<option value="ago_seven" >近7天</option>
|
||||
<option value="ago_fifteen" >近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
|
||||
{$res.start} 至 {$res.end}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm6 layui-col-md3" >
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-header" >
|
||||
商品浏览量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list" >
|
||||
<p class="layuiadmin-big-font" id="goods_click">{$res.goods_click}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
商品收藏量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font" id="goods_collect">{$res.goods_collect}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
商品销量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font" id="goods_sale">{$res.goods_sale}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card" style="margin-top:20px">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline layui-card-header" style="">商品趋势分析</div>
|
||||
<div class="layui-input-inline" style="right: 100px">
|
||||
<select lay-verify="required" lay-filter="goods">
|
||||
<option value="ago_seven">近7天</option>
|
||||
<option value="ago_fifteen">近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" id="goods_days" style="white-space: nowrap;top:8px;right:80px">
|
||||
{$res.start_seven} 至 {$res.end_seven}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div id="goodsCharts" style="width: 100%;height: 80vh;"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
layui.config({
|
||||
version:"{$front_version}",
|
||||
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index','table','like','echarts','form'], function(){
|
||||
var $ = layui.$
|
||||
,form = layui.form
|
||||
,like = layui.like
|
||||
,echarts = layui.echarts;
|
||||
|
||||
|
||||
const color = ["#FFC005", "#00CA69","#0090FF"];
|
||||
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("statistics/goods")}',
|
||||
data:{'goods':'ago_seven'},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
var xData = res.data.days;
|
||||
var pvData = res.data.echarts_goods_click;
|
||||
var collectData = res.data.echarts_goods_collect;
|
||||
var saleData = res.data.echarts_goods_sale;
|
||||
var option = setOption(xData, pvData, collectData, saleData);
|
||||
var goodsCharts = echarts.init(document.getElementById('goodsCharts'));
|
||||
goodsCharts.setOption(option, true);
|
||||
window.addEventListener('resize', function () {
|
||||
goodsCharts.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
form.on('select(goods)', function(data){
|
||||
like.ajax({
|
||||
url: '{:url("statistics/goods")}',
|
||||
data: {'goods':data.value},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
$('#goods_days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
var xData = res.data.days;
|
||||
var pvData = res.data.echarts_goods_click;
|
||||
var collectData = res.data.echarts_goods_collect;
|
||||
var saleData = res.data.echarts_goods_sale;
|
||||
var option = setOption(xData, pvData, collectData, saleData);
|
||||
var goodsCharts = echarts.init(document.getElementById('goodsCharts'));
|
||||
goodsCharts.setOption(option, true);
|
||||
window.addEventListener('resize', function () {
|
||||
goodsCharts.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
form.on('select(days)', function(data){
|
||||
like.ajax({
|
||||
url:'{:url("statistics/goods")}',
|
||||
data:{'days':data.value},
|
||||
type:"post",
|
||||
success:function(res)
|
||||
{
|
||||
$('#days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
$('#goods_click').html(res.data.goods_click);
|
||||
$('#goods_sale').html(res.data.goods_sale);
|
||||
$('#goods_collect').html(res.data.goods_collect);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//图表设置
|
||||
function setOption(xData, pvData, collectData, saleData) {
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
color: color,
|
||||
legend: {
|
||||
top: 20,
|
||||
},
|
||||
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.seriesName}${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${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",
|
||||
name: '(日期)',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9"
|
||||
}
|
||||
},
|
||||
data: xData,
|
||||
}],
|
||||
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: [{
|
||||
name: "商品浏览量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',//数据交叉点样式
|
||||
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: pvData
|
||||
}, {
|
||||
name: "商品收藏量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: collectData
|
||||
},{
|
||||
name: "商品销量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[2],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[2], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[2], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[2], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[2], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: saleData
|
||||
}]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
314
application/admin/view/statistics/member.html
Normal file
314
application/admin/view/statistics/member.html
Normal file
@@ -0,0 +1,314 @@
|
||||
{layout name="layout1" /}
|
||||
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-fluid">
|
||||
|
||||
<div class="layui-form" lay-filter="">
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-input-inline">
|
||||
<div class="layui-card-header" >概况</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-input-inline" style="left: 50px">
|
||||
<div class="layui-input-inline">
|
||||
<select name="days" lay-verify="required" lay-filter="days">
|
||||
<option value="today" >今日实时</option>
|
||||
<option value="ago_seven" >近7天</option>
|
||||
<option value="ago_fifteen" >近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
|
||||
{$res.start} 至 {$res.end}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm6 layui-col-md3" >
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-header" >
|
||||
会员数量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list" >
|
||||
<p class="layuiadmin-big-font" id="count_user">{$res.count}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
新增会员数量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font" id="add_user">{$res.add}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--会员分析图-->
|
||||
<div class="layui-card" style="margin-top:20px">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline layui-card-header" style="">会员趋势分析</div>
|
||||
<div class="layui-input-inline" style="right: 100px">
|
||||
<select name="member" lay-verify="required" lay-filter="member">
|
||||
<option value="ago_seven">近7天</option>
|
||||
<option value="ago_fifteen">近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" id="member_days" style="white-space: nowrap;top:8px;right:80px">
|
||||
{$res.start_seven} 至 {$res.end_seven}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div id="memberCharts" style="width: 100%;height: 80vh;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
layui.config({
|
||||
version:"{$front_version}",
|
||||
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index','table','like','echarts','form'], function(){
|
||||
var $ = layui.$
|
||||
,form = layui.form
|
||||
,like = layui.like
|
||||
,echarts = layui.echarts;
|
||||
|
||||
|
||||
form.on('select(days)', function(data){
|
||||
like.ajax({
|
||||
url:'{:url("statistics/member")}',
|
||||
data:{'days':data.value},
|
||||
type:"post",
|
||||
success:function(res)
|
||||
{
|
||||
$('#days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
$('#count_user').html(res.data.count);
|
||||
$('#add_user').html(res.data.add);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
||||
|
||||
like.ajax({
|
||||
url: '{:url("statistics/member")}',
|
||||
data: {member:'ago_seven'},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
var memberNum = res.data.echarts_count;
|
||||
var newMember = res.data.echarts_add;
|
||||
var xData = res.data.days;
|
||||
var option = setOption(memberNum, newMember, xData);
|
||||
let chart = document.getElementById('memberCharts');
|
||||
let memberChart = echarts.init(chart);
|
||||
memberChart.setOption(option, true);
|
||||
window.addEventListener('resize', function () {
|
||||
memberChart.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
form.on('select(member)', function(data){
|
||||
like.ajax({
|
||||
url: '{:url("statistics/member")}',
|
||||
data: {member:data.value},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
$('#member_days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
|
||||
var xData = res.data.days;
|
||||
var memberNum = res.data.echarts_count;
|
||||
var newMemeber = res.data.echarts_add;
|
||||
let option = setOption(memberNum, newMemeber, xData);
|
||||
let memberChart = echarts.init(document.getElementById('memberCharts'));
|
||||
memberChart.setOption(option, true);
|
||||
window.addEventListener('resize', function () {
|
||||
memberChart.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//图标设置
|
||||
function setOption(memberNum, newMember, xData) {
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
itemWidth: 6,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: '#556677'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#fff',
|
||||
textStyle: {
|
||||
color: '#5c6c7c'
|
||||
},
|
||||
padding: [10, 10],
|
||||
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
||||
},
|
||||
grid: {
|
||||
top: '15%'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
name: '(日期)',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(107,107,107,0.37)', //x轴颜色
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#999' //坐标轴字颜色
|
||||
},
|
||||
margin: 15
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
padding: [11, 5, 7],
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#fff' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 0.9,
|
||||
color: '#fff' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 0.9,
|
||||
color: '#33c0cd' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#33c0cd' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
boundaryGap: false
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(人)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(107,107,107,0.37)', //y轴颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '会员数量',
|
||||
type: 'line',
|
||||
data: memberNum,
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#9effff'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#9E87FF'
|
||||
}
|
||||
]),
|
||||
shadowColor: 'rgba(158,135,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorList[0],
|
||||
borderColor: colorList[0]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '新增会员数量',
|
||||
type: 'line',
|
||||
data: newMember,
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#73DD39'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#73DDFF'
|
||||
}
|
||||
]),
|
||||
shadowColor: 'rgba(115,221,255, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorList[1],
|
||||
borderColor: colorList[1]
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
321
application/admin/view/statistics/visit.html
Normal file
321
application/admin/view/statistics/visit.html
Normal file
@@ -0,0 +1,321 @@
|
||||
{layout name="layout1" /}
|
||||
|
||||
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-fluid">
|
||||
|
||||
<div class="layui-form" lay-filter="">
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-input-inline">
|
||||
<div class="layui-card-header" >概况</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-input-inline" style="left: 50px">
|
||||
<div class="layui-input-inline">
|
||||
<select name="day" lay-verify="required" lay-filter="days">
|
||||
<option value="today" >今日实时</option>
|
||||
<option value="ago_seven" >近7天</option>
|
||||
<option value="ago_fifteen" >近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
|
||||
{$res.start} 至 {$res.end}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm6 layui-col-md3" >
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-header" >
|
||||
商品浏览量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list" >
|
||||
<p class="layuiadmin-big-font" id="goods_click">{$res.goods_click}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm6 layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
用户浏览量
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font" id="user_click">{$res.user_click}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card" style="width: 100%;margin-top:20px">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline layui-card-header" style="">访问趋势分析</div>
|
||||
<div class="layui-input-inline" style="right: 100px">
|
||||
<select lay-verify="required" lay-filter="goods">
|
||||
<option value="ago_seven">近7天</option>
|
||||
<option value="ago_fifteen">近15天</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" id="goods_days" style="white-space: nowrap;top:8px;right:80px">
|
||||
{$res.start_seven} 至 {$res.end_seven}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div id="visitCharts" style="width: 100%;height: 80vh;"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
layui.config({
|
||||
version:"{$front_version}",
|
||||
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index','table','like','echarts','form'], function(){
|
||||
var $ = layui.$
|
||||
,form = layui.form
|
||||
,like = layui.like
|
||||
,echarts = layui.echarts;
|
||||
|
||||
const color = ["#FFC005", "#00CA69","#0090FF"];
|
||||
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("statistics/visit")}',
|
||||
data: {'goods':'ago_seven'},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
var xData = res.data.days;
|
||||
var pvData = res.data.echarts_goods_click;
|
||||
var collectData = res.data.echarts_user_click;
|
||||
|
||||
var option = setOption(xData, pvData, collectData);
|
||||
var visitCharts = echarts.init(document.getElementById('visitCharts'));
|
||||
visitCharts.setOption(option, true);
|
||||
window.addEventListener('resize', function () {
|
||||
visitCharts.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
form.on('select(goods)', function(data){
|
||||
like.ajax({
|
||||
url: '{:url("statistics/visit")}',
|
||||
data: {'goods':data.value},
|
||||
type: "post",
|
||||
success: function (res) {
|
||||
$('#goods_days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
var xData = res.data.days;
|
||||
var pvData = res.data.echarts_goods_click;
|
||||
var collectData = res.data.echarts_user_click;
|
||||
var saleData = res.data.echarts_goods_sale;
|
||||
var option = setOption(xData, pvData, collectData, saleData);
|
||||
var visitCharts = echarts.init(document.getElementById('visitCharts'));
|
||||
visitCharts.setOption(option, true);
|
||||
window.addEventListener('resize', function () {
|
||||
visitCharts.resize()
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
form.on('select(days)', function(data){
|
||||
like.ajax({
|
||||
url:'{:url("statistics/visit")}',
|
||||
data:{'days':data.value},
|
||||
type:"post",
|
||||
success:function(res)
|
||||
{
|
||||
$('#days').html(res.data.start+ ' 至 ' +res.data.end );
|
||||
$('#goods_click').html(res.data.goods_click);
|
||||
$('#user_click').html(res.data.user_click);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//图表设置
|
||||
function setOption(xData, pvData, collectData) {
|
||||
option = {
|
||||
backgroundColor: '#fff',
|
||||
color: color,
|
||||
legend: {
|
||||
top: 20,
|
||||
},
|
||||
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.seriesName}${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${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",
|
||||
name: '(日期)',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9"
|
||||
}
|
||||
},
|
||||
data: xData,
|
||||
}],
|
||||
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: [{
|
||||
name: "商品浏览量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',//数据交叉点样式
|
||||
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: pvData
|
||||
}, {
|
||||
name: "用户浏览量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: collectData
|
||||
}]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user