|
|
|
@ -20,24 +20,18 @@ const getDayConsumeCoin = ref({}); |
|
|
|
const searchTime = ref([]); |
|
|
|
|
|
|
|
// 月份柱状图 |
|
|
|
// 充值 |
|
|
|
const payTotalRecharge = ref(0); |
|
|
|
const payTotalFree = ref(0); |
|
|
|
const payTotalTask = ref(0); |
|
|
|
const getMediuPayCoin = ref({}); |
|
|
|
const payMonthCategory = ref([]); |
|
|
|
const payMonthRecharge = ref([]); |
|
|
|
const payMonthFree = ref([]); |
|
|
|
const payMonthTask = ref([]); |
|
|
|
// 消费 |
|
|
|
const consumeTotalRecharge = ref(0); |
|
|
|
const consumeTotalFree = ref(0); |
|
|
|
const consumeTotalTask = ref(0); |
|
|
|
const getMediuConsumeCoin = ref({}); |
|
|
|
const consumeMonthCategory = ref([]); |
|
|
|
const consumeMonthRecharge = ref([]); |
|
|
|
const consumeMonthFree = ref([]); |
|
|
|
const consumeMonthTask = ref([]); |
|
|
|
const getMiddleBarObj = ref({ |
|
|
|
updateType: "充值" |
|
|
|
}); |
|
|
|
const getMiddleBarData = ref({}); |
|
|
|
const middleTotalRecharge = ref(0); |
|
|
|
const middleTotalFree = ref(0); |
|
|
|
const middleTotalTask = ref(0); |
|
|
|
const middleCategory = ref([]); |
|
|
|
const middleRecharge = ref([]); |
|
|
|
const middleFree = ref([]); |
|
|
|
const middleTask = ref([]); |
|
|
|
|
|
|
|
|
|
|
|
// 地区排名 |
|
|
|
const getAreaRankObj = ref({ |
|
|
|
@ -90,6 +84,7 @@ const list = ref([]); |
|
|
|
const get = async function () { |
|
|
|
try { |
|
|
|
getAreaRank(); |
|
|
|
getMiddleBar(); |
|
|
|
// 发送POST请求 |
|
|
|
const result1 = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getSumCoin", |
|
|
|
@ -116,14 +111,14 @@ const get = async function () { |
|
|
|
// {} |
|
|
|
// ); |
|
|
|
|
|
|
|
const result7 = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getMediuPayCoin", |
|
|
|
{} |
|
|
|
); |
|
|
|
const result8 = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getMediuConsumeCoin", |
|
|
|
{} |
|
|
|
); |
|
|
|
// const result7 = await API.post( |
|
|
|
// "http://192.168.8.93:10010/statistics/getMediuPayCoin", |
|
|
|
// {} |
|
|
|
// ); |
|
|
|
// const result8 = await API.post( |
|
|
|
// "http://192.168.8.93:10010/statistics/getMediuConsumeCoin", |
|
|
|
// {} |
|
|
|
// ); |
|
|
|
const result9 = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/b", |
|
|
|
{} |
|
|
|
@ -135,78 +130,14 @@ const get = async function () { |
|
|
|
getYearConsumeCoin.value = result3.data; |
|
|
|
getDayConsumeCoin.value = result4.data; |
|
|
|
|
|
|
|
getMediuPayCoin.value = result7.data; |
|
|
|
getMediuConsumeCoin.value = result8.data; |
|
|
|
platformData.value = result9.data; |
|
|
|
|
|
|
|
console.log("getSumCoin", getSumCoin.value); |
|
|
|
console.log("statistics", statistics.value); |
|
|
|
console.log("getYearConsumeCoin", getYearConsumeCoin.value); |
|
|
|
console.log("getDayConsumeCoin", getDayConsumeCoin.value); |
|
|
|
|
|
|
|
console.log("getMediuPayCoin", getMediuPayCoin.value); |
|
|
|
console.log("getMediuConsumeCoin", getMediuConsumeCoin.value); |
|
|
|
console.log("platformData", platformData.value); |
|
|
|
|
|
|
|
// 月份 |
|
|
|
// 充值 |
|
|
|
payMonthCategory.value = getMediuPayCoin.value |
|
|
|
.map((item) => item.month) |
|
|
|
.reverse(); |
|
|
|
payMonthRecharge.value = getMediuPayCoin.value |
|
|
|
.map((item) => Math.abs(item.rechargeSumCoin)) |
|
|
|
.reverse(); |
|
|
|
payMonthFree.value = getMediuPayCoin.value |
|
|
|
.map((item) => Math.abs(item.freeSumCoin)) |
|
|
|
.reverse(); |
|
|
|
payMonthTask.value = getMediuPayCoin.value |
|
|
|
.map((item) => Math.abs(item.taskSumCoin)) |
|
|
|
.reverse(); |
|
|
|
payMonthRecharge.value.forEach((number) => { |
|
|
|
payTotalRecharge.value += number; |
|
|
|
}); |
|
|
|
payMonthFree.value.forEach((number) => { |
|
|
|
payTotalFree.value += number; |
|
|
|
}); |
|
|
|
payMonthTask.value.forEach((number) => { |
|
|
|
payTotalTask.value += number; |
|
|
|
}); |
|
|
|
console.log("payMonthCategory", payMonthCategory.value); |
|
|
|
console.log("payMonthRecharge", payMonthRecharge.value); |
|
|
|
console.log("payMonthFree", payMonthFree.value); |
|
|
|
console.log("payMonthTask", payMonthTask.value); |
|
|
|
console.log("payTotalRecharge", payTotalRecharge.value); |
|
|
|
console.log("payTotalFree", payTotalFree.value); |
|
|
|
console.log("payTotalTask", payTotalTask.value); |
|
|
|
// 消费 |
|
|
|
consumeMonthCategory.value = getMediuConsumeCoin.value |
|
|
|
.map((item) => item.month) |
|
|
|
.reverse(); |
|
|
|
consumeMonthRecharge.value = getMediuConsumeCoin.value |
|
|
|
.map((item) => Math.abs(item.rechargeSumCoin)) |
|
|
|
.reverse(); |
|
|
|
consumeMonthFree.value = getMediuConsumeCoin.value |
|
|
|
.map((item) => Math.abs(item.freeSumCoin)) |
|
|
|
.reverse(); |
|
|
|
consumeMonthTask.value = getMediuConsumeCoin.value |
|
|
|
.map((item) => Math.abs(item.taskSumCoin)) |
|
|
|
.reverse(); |
|
|
|
consumeMonthRecharge.value.forEach((number) => { |
|
|
|
consumeTotalRecharge.value += number; |
|
|
|
}); |
|
|
|
consumeMonthFree.value.forEach((number) => { |
|
|
|
consumeTotalFree.value += number; |
|
|
|
}); |
|
|
|
consumeMonthTask.value.forEach((number) => { |
|
|
|
consumeTotalTask.value += number; |
|
|
|
}); |
|
|
|
console.log("consumeMonthCategory", consumeMonthCategory.value); |
|
|
|
console.log("consumeMonthRecharge", consumeMonthRecharge.value); |
|
|
|
console.log("consumeMonthFree", consumeMonthFree.value); |
|
|
|
console.log("consumeMonthTask", consumeMonthTask.value); |
|
|
|
console.log("consumeTotalRecharge", consumeTotalRecharge.value); |
|
|
|
console.log("consumeTotalFree", consumeTotalFree.value); |
|
|
|
console.log("consumeTotalTask", consumeTotalTask.value); |
|
|
|
|
|
|
|
option3Data.value = [ |
|
|
|
{ |
|
|
|
@ -432,10 +363,197 @@ const get = async function () { |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
}; |
|
|
|
// 获取中间柱状图数据 |
|
|
|
const getMiddleBar = async function () { |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.147:10010/statistics/getCoinTime", |
|
|
|
getMiddleBarObj.value |
|
|
|
); |
|
|
|
|
|
|
|
getMiddleBarData.value = result.data; |
|
|
|
console.log("getMiddleBarData", getMiddleBarData.value); |
|
|
|
|
|
|
|
// 柱状图数据处理 |
|
|
|
middleCategory.value = getMiddleBarData.value |
|
|
|
.map((item) => item.day == null ? item.month : item.day.substring(0, 10)); |
|
|
|
middleRecharge.value = getMiddleBarData.value |
|
|
|
.map((item) => Math.abs(item.rechargeSumCoin)); |
|
|
|
middleFree.value = getMiddleBarData.value |
|
|
|
.map((item) => Math.abs(item.freeSumCoin)); |
|
|
|
middleFree.value = getMiddleBarData.value |
|
|
|
.map((item) => Math.abs(item.taskSumCoin)); |
|
|
|
|
|
|
|
middleTotalRecharge.value = 0; |
|
|
|
middleTotalFree.value = 0; |
|
|
|
middleTotalTask.value = 0; |
|
|
|
middleRecharge.value.forEach((number) => { |
|
|
|
middleTotalRecharge.value += number; |
|
|
|
}); |
|
|
|
middleFree.value.forEach((number) => { |
|
|
|
middleTotalFree.value += number; |
|
|
|
}); |
|
|
|
middleTask.value.forEach((number) => { |
|
|
|
middleTotalTask.value += number; |
|
|
|
}); |
|
|
|
|
|
|
|
console.log("middleCategory", middleCategory.value); |
|
|
|
console.log("middleRecharge", middleRecharge.value); |
|
|
|
console.log("middleFree", middleFree.value); |
|
|
|
console.log("middleTask", middleTask.value); |
|
|
|
console.log("middleTotalRecharge", middleTotalRecharge.value); |
|
|
|
console.log("middleTotalFree", middleTotalFree.value); |
|
|
|
console.log("middleTotalTask", middleTotalTask.value); |
|
|
|
|
|
|
|
if (getMiddleBarObj.value.updateType == "充值") { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var recharge = echarts.init(document.getElementById("recharge")); |
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
// Use axis to trigger tooltip |
|
|
|
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow' |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: "3%", |
|
|
|
right: "4%", |
|
|
|
bottom: "3%", |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: middleCategory.value, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "充值金币", |
|
|
|
color: "#35e383", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: middleRecharge.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "免费金币", |
|
|
|
color: "#5f8ff5", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: middleFree.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "任务金币", |
|
|
|
color: "#ffe733", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: middleTask.value, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
recharge.setOption(option); |
|
|
|
} else { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var consume = echarts.init(document.getElementById("consume")); |
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
// Use axis to trigger tooltip |
|
|
|
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow' |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: "3%", |
|
|
|
right: "4%", |
|
|
|
bottom: "3%", |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: middleCategory.value, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "充值金币", |
|
|
|
color: "#35e383", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: middleRecharge.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "免费金币", |
|
|
|
color: "#5f8ff5", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: middleFree.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "任务金币", |
|
|
|
color: "#ffe733", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: middleTask.value, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
consume.setOption(option); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 获取门店排名 |
|
|
|
const getAreaRank = async function () { |
|
|
|
const result = await API.post( |
|
|
|
"http://192.168.8.93:10010/statistics/getMee", |
|
|
|
"http://192.168.8.147:10010/statistics/getMee", |
|
|
|
getAreaRankObj.value |
|
|
|
); |
|
|
|
|
|
|
|
@ -496,12 +614,15 @@ const changeGoldType = function () { |
|
|
|
// 点击标签页初始化 |
|
|
|
const handleChange = function () { |
|
|
|
if (activeName.value == "recharge") { |
|
|
|
getMiddleBarObj.value.updateType = "充值"; |
|
|
|
getAreaRankObj.value.updateType = "充值"; |
|
|
|
} else { |
|
|
|
getMiddleBarObj.value.updateType = "消费"; |
|
|
|
getAreaRankObj.value.updateType = "消费"; |
|
|
|
} |
|
|
|
getAreaRankObj.value.type = ""; |
|
|
|
goldType.value = "全部类型"; |
|
|
|
getMiddleBar(); |
|
|
|
getAreaRank(); |
|
|
|
}; |
|
|
|
// 时间范围控制 |
|
|
|
@ -509,8 +630,8 @@ const disabledDate = function (date) { |
|
|
|
const currentDate = new Date(); |
|
|
|
const startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1); |
|
|
|
const endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); |
|
|
|
if(date >= startDate && date <= endDate){ |
|
|
|
return false; |
|
|
|
if (date >= startDate && date <= endDate) { |
|
|
|
return false; |
|
|
|
} |
|
|
|
return true; |
|
|
|
} |
|
|
|
@ -525,7 +646,7 @@ const today = function () { |
|
|
|
const endDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
current.getMonth(), |
|
|
|
current.getDate() + 1 |
|
|
|
current.getDate() |
|
|
|
); |
|
|
|
searchTime.value = [startDate, endDate]; |
|
|
|
search(); |
|
|
|
@ -533,18 +654,12 @@ const today = function () { |
|
|
|
|
|
|
|
}; |
|
|
|
// 本周 |
|
|
|
const thisWeek= function () { |
|
|
|
const thisWeek = function () { |
|
|
|
const current = new Date(); |
|
|
|
const startDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
current.getMonth(), |
|
|
|
current.getDate() - 6 |
|
|
|
); |
|
|
|
const endDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
current.getMonth(), |
|
|
|
current.getDate() + 1 |
|
|
|
); |
|
|
|
const dayOfWeek = current.getDay(); // 获取今天是星期几（0 表示周日，1 表示周一，以此类推） |
|
|
|
const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); // 计算本周第一天的日期差值 |
|
|
|
const startDate = new Date(current.getFullYear(), current.getMonth(), diff); |
|
|
|
const endDate = new Date(current.getFullYear(), current.getMonth(), diff + 6); |
|
|
|
searchTime.value = [startDate, endDate]; |
|
|
|
search(); |
|
|
|
// console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")) |
|
|
|
@ -559,7 +674,7 @@ const thisMonth = function () { |
|
|
|
); |
|
|
|
const endDate = new Date( |
|
|
|
current.getFullYear(), |
|
|
|
current.getMonth()+1, |
|
|
|
current.getMonth() + 1, |
|
|
|
0 |
|
|
|
); |
|
|
|
searchTime.value = [startDate, endDate]; |
|
|
|
@ -575,7 +690,7 @@ const thisYear = function () { |
|
|
|
1 |
|
|
|
); |
|
|
|
const endDate = new Date( |
|
|
|
current.getFullYear()+1, |
|
|
|
current.getFullYear() + 1, |
|
|
|
0, |
|
|
|
0 |
|
|
|
); |
|
|
|
@ -583,22 +698,35 @@ const thisYear = function () { |
|
|
|
search(); |
|
|
|
// console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")) |
|
|
|
}; |
|
|
|
const allTime=function(){ |
|
|
|
searchTime.value=["",""]; |
|
|
|
const allTime = function () { |
|
|
|
searchTime.value = ["", ""]; |
|
|
|
search(); |
|
|
|
} |
|
|
|
// 根据时间搜索 |
|
|
|
const search=function(){ |
|
|
|
console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")) |
|
|
|
const search = function () { |
|
|
|
console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD")); |
|
|
|
|
|
|
|
getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format("YYYY-MM-DD"); |
|
|
|
getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format("YYYY-MM-DD"); |
|
|
|
if (getMiddleBarObj.value.searchStartTime == "Invalid date") { |
|
|
|
delete getMiddleBarObj.value.searchStartTime; |
|
|
|
} |
|
|
|
if (getMiddleBarObj.value.searchEndTime == "Invalid date") { |
|
|
|
delete getMiddleBarObj.value.searchEndTime; |
|
|
|
} |
|
|
|
console.log("getMiddleBarObj", getMiddleBarObj.value); |
|
|
|
|
|
|
|
getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format("YYYY-MM-DD"); |
|
|
|
getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format("YYYY-MM-DD"); |
|
|
|
if(getAreaRankObj.value.searchStartTime=="Invalid date"){ |
|
|
|
if (getAreaRankObj.value.searchStartTime == "Invalid date") { |
|
|
|
delete getAreaRankObj.value.searchStartTime; |
|
|
|
} |
|
|
|
if(getAreaRankObj.value.searchEndTime=="Invalid date"){ |
|
|
|
if (getAreaRankObj.value.searchEndTime == "Invalid date") { |
|
|
|
delete getAreaRankObj.value.searchEndTime; |
|
|
|
} |
|
|
|
console.log("getAreaRankObj", getAreaRankObj.value); |
|
|
|
|
|
|
|
getMiddleBar(); |
|
|
|
getAreaRank(); |
|
|
|
} |
|
|
|
|
|
|
|
@ -738,7 +866,7 @@ onMounted(async function () { |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: payMonthCategory.value, |
|
|
|
data: middleCategory.value, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
@ -750,12 +878,12 @@ onMounted(async function () { |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: payMonthRecharge.value, |
|
|
|
data: middleRecharge.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "免费金币", |
|
|
|
@ -763,12 +891,12 @@ onMounted(async function () { |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: payMonthFree.value, |
|
|
|
data: middleFree.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "任务金币", |
|
|
|
@ -776,89 +904,18 @@ onMounted(async function () { |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: payMonthTask.value, |
|
|
|
data: middleTask.value, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
rechargeBar.setOption(option1); |
|
|
|
|
|
|
|
//第二个柱状图 基于准备好的dom，初始化echarts实例 |
|
|
|
var consumeBar = echarts.init(document.getElementById("consume")); |
|
|
|
const option2 = { |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
// Use axis to trigger tooltip |
|
|
|
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow' |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: "3%", |
|
|
|
right: "4%", |
|
|
|
bottom: "3%", |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: consumeMonthCategory.value, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "充值金币", |
|
|
|
color: "#35e383", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: consumeMonthRecharge.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "免费金币", |
|
|
|
color: "#5f8ff5", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: consumeMonthFree.value, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "任务金币", |
|
|
|
color: "#ffe733", |
|
|
|
type: "bar", |
|
|
|
stack: "total", |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
focus: "series", |
|
|
|
}, |
|
|
|
data: consumeMonthTask.value, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
// 使用刚指定的配置项和数据显示图表。 |
|
|
|
consumeBar.setOption(option2); |
|
|
|
|
|
|
|
// 第一个饼状图 基于准备好的dom，初始化echarts实例 |
|
|
|
var yearRechargePie = echarts.init(document.getElementById("yearRecharge")); |
|
|
|
const option3 = { |
|
|
|
@ -1126,24 +1183,24 @@ onMounted(async function () { |
|
|
|
<el-button text @click="thisMonth()">本月</el-button> |
|
|
|
<el-button text @click="thisYear()">本年</el-button> |
|
|
|
<el-date-picker v-model="searchTime" type="daterange" range-separator="→" start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" style="width: 200px;" :disabled-date="disabledDate" @change="search"/> |
|
|
|
end-placeholder="结束时间" style="width: 200px;" :disabled-date="disabledDate" @change="search" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="handleChange"> |
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange"> |
|
|
|
<el-tab-pane label="金币充值" name="recharge"> |
|
|
|
<div> |
|
|
|
合计：充值金币： |
|
|
|
<span class="mid-head-font">{{ |
|
|
|
formatNum(payTotalRecharge) |
|
|
|
formatNum(middleTotalRecharge) |
|
|
|
}}</span> |
|
|
|
，免费金币： |
|
|
|
<span class="mid-head-font">{{ formatNum(payTotalFree) }}</span> |
|
|
|
<span class="mid-head-font">{{ formatNum(middleTotalFree) }}</span> |
|
|
|
，任务金币： |
|
|
|
<span class="mid-head-font">{{ formatNum(payTotalTask) }}</span> |
|
|
|
<span class="mid-head-font">{{ formatNum(middleTotalTask) }}</span> |
|
|
|
</div> |
|
|
|
<div class="bar"> |
|
|
|
<el-scrollbar style="width: 1150px;"> |
|
|
|
<div id="recharge" style="width: 1150px; height: 400px"></div> |
|
|
|
<div id="recharge" style="width: 100%; height: 400px;"></div> |
|
|
|
</el-scrollbar> |
|
|
|
|
|
|
|
<div style="width: 100px"> |
|
|
|
@ -1189,19 +1246,22 @@ onMounted(async function () { |
|
|
|
<div> |
|
|
|
合计：充值金币： |
|
|
|
<span class="mid-head-font">{{ |
|
|
|
formatNum(consumeTotalRecharge) |
|
|
|
formatNum(middleTotalRecharge) |
|
|
|
}}</span> |
|
|
|
，免费金币： |
|
|
|
<span class="mid-head-font">{{ |
|
|
|
formatNum(consumeTotalFree) |
|
|
|
formatNum(middleTotalFree) |
|
|
|
}}</span> |
|
|
|
，任务金币： |
|
|
|
<span class="mid-head-font">{{ |
|
|
|
formatNum(consumeTotalTask) |
|
|
|
formatNum(middleTotalTask) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="bar"> |
|
|
|
<div id="consume" style="width: 1150px; height: 400px"></div> |
|
|
|
<el-scrollbar style="width: 1150px;"> |
|
|
|
<div id="consume" style="width: 100%; height: 400px;"></div> |
|
|
|
</el-scrollbar> |
|
|
|
|
|
|
|
<div style="width: 100px"> |
|
|
|
<div class="goldCategory"> |
|
|
|
<span class="light-green-dot"></span> |
|
|
|
@ -1297,7 +1357,6 @@ onMounted(async function () { |
|
|
|
</template> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
|
|
.head-mid-font { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
|
hongxilin
5 months ago