update
This commit is contained in:
ylj20011123
parent
f8c04a8e6a
commit
a922a57525
@ -34,60 +34,7 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
// selectedMode: false,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 5]
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value',
|
||||
splitLine: { show: false }, // 隐藏刻度线
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
interval: 0 // 强制显示所有标签
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: res.seriesData,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
@ -162,6 +109,64 @@ const handleGetData = async () => {
|
||||
return res
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
legend: {
|
||||
// selectedMode: false,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 5]
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value',
|
||||
splitLine: { show: false }, // 隐藏刻度线
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
interval: 0 // 强制显示所有标签
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: res.seriesData,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return option
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
@ -172,7 +177,18 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -66,67 +66,7 @@ const handleGoMounted = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
orient: 'vertical', // 图例纵向排列
|
||||
left: 200, // 距离右侧5%
|
||||
top: 'center', // 垂直居中
|
||||
itemWidth: 12, // 图例标记宽度
|
||||
itemHeight: 12, // 图例标记高度
|
||||
textStyle: {
|
||||
color: '#fff', // 文字颜色
|
||||
rich: {
|
||||
// 可以在这里添加富文本样式
|
||||
value: {
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 0, 5] // 文字间距
|
||||
}
|
||||
}
|
||||
},
|
||||
// 自定义图例内容
|
||||
formatter: function (name: string) {
|
||||
// 找到对应的数据项
|
||||
const dataItem = res.pieData.find((item: any) => item.name === name);
|
||||
// 返回自定义格式
|
||||
return `${name} ${dataItem?.value}%`;
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.name} ${params?.percent}% </div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['0%', '70%'],
|
||||
center: ['25%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.pieData
|
||||
}
|
||||
]
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
@ -285,6 +225,86 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
legend: {
|
||||
orient: 'vertical', // 图例纵向排列
|
||||
left: 200, // 距离右侧5%
|
||||
top: 'center', // 垂直居中
|
||||
itemWidth: 12, // 图例标记宽度
|
||||
itemHeight: 12, // 图例标记高度
|
||||
textStyle: {
|
||||
color: '#fff', // 文字颜色
|
||||
rich: {
|
||||
// 可以在这里添加富文本样式
|
||||
value: {
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 0, 5] // 文字间距
|
||||
}
|
||||
}
|
||||
},
|
||||
// 自定义图例内容
|
||||
formatter: function (name: string) {
|
||||
// 找到对应的数据项
|
||||
const dataItem = res.pieData.find((item: any) => item.name === name);
|
||||
// 返回自定义格式
|
||||
return `${name} ${dataItem?.value}%`;
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.name} ${params?.percent}% </div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['0%', '70%'],
|
||||
center: ['25%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.pieData
|
||||
}
|
||||
]
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
|
||||
handleBrandTabList()
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -447,6 +447,11 @@ onBeforeUnmount(() => {
|
||||
myChartBottom?.dispose();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
handleGetData
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -55,86 +55,7 @@ const handleGoMounted = async () => {
|
||||
const centerX = width * 0.2;
|
||||
const centerY = height * 0.5;
|
||||
|
||||
const option = {
|
||||
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex]}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
graphic: { // 关键配置：在图表中心添加图片
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: businessFormatCenterIcon,
|
||||
width: 83,
|
||||
height: 83
|
||||
},
|
||||
left: centerX - 41.5,
|
||||
top: centerY - 41.5,
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
center: ['20%', '50%'], // 图形向左偏移
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 200,
|
||||
top: 'center',
|
||||
align: 'left',
|
||||
itemGap: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
width: 90, // 固定名称宽度
|
||||
align: 'left',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
width: 50, // 固定百分比宽度
|
||||
align: 'right',
|
||||
padding: [0, 10, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name: any) {
|
||||
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
|
||||
|
||||
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
|
||||
}
|
||||
}
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
@ -232,12 +153,121 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const chartDom = document.getElementById('BusinessStructure');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const rect = chartDom.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
|
||||
// 计算center位置（20%，50%）对应的实际像素
|
||||
const centerX = width * 0.2;
|
||||
const centerY = height * 0.5;
|
||||
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex]}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
graphic: { // 关键配置：在图表中心添加图片
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: businessFormatCenterIcon,
|
||||
width: 83,
|
||||
height: 83
|
||||
},
|
||||
left: centerX - 41.5,
|
||||
top: centerY - 41.5,
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
center: ['20%', '50%'], // 图形向左偏移
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 200,
|
||||
top: 'center',
|
||||
align: 'left',
|
||||
itemGap: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
width: 90, // 固定名称宽度
|
||||
align: 'left',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
width: 50, // 固定百分比宽度
|
||||
align: 'right',
|
||||
padding: [0, 10, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name: any) {
|
||||
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
|
||||
|
||||
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
|
||||
}
|
||||
}
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<template>
|
||||
<div class="BusinessStructureBox">
|
||||
<SmallTitle :title="'业态结构占比'"></SmallTitle>
|
||||
|
||||
|
||||
@ -34,6 +34,92 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: any = []
|
||||
let carResList: any = []
|
||||
let carRealResList: any = []
|
||||
let orderResList: any = []
|
||||
let orderRealResList: any = []
|
||||
|
||||
const req: any = {
|
||||
Province_Code: '530000',
|
||||
// Province_Code: '340000',
|
||||
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
|
||||
Serverpart_ID: ''
|
||||
}
|
||||
|
||||
let ConsumptionConversion = sessionStorage.getItem('ConsumptionConversion')
|
||||
let data: any = []
|
||||
if (ConsumptionConversion) {
|
||||
data = JSON.parse(ConsumptionConversion)
|
||||
} else {
|
||||
data = await handleGetTransactionConvert(req)
|
||||
sessionStorage.setItem("ConsumptionConversion", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
|
||||
// const data = await handleGetTransactionConvert(req)
|
||||
|
||||
|
||||
let carList = data.BayonetList.data
|
||||
|
||||
let orderList = data.TransactionList.data
|
||||
|
||||
let aiObjCar: any = {}
|
||||
let aiOrder: any = {}
|
||||
|
||||
if (carList && carList.length > 0) {
|
||||
carList.forEach((item: any) => {
|
||||
carResList.push((item[1]))
|
||||
carRealResList.push(item[1])
|
||||
aiObjCar[`${item[0]}时`] = item[1] + '辆'
|
||||
})
|
||||
}
|
||||
|
||||
if (orderList && orderList.length > 0) {
|
||||
orderList.forEach((item: any) => {
|
||||
category.push(item[0])
|
||||
orderResList.push((item[1]))
|
||||
orderRealResList.push(item[1])
|
||||
aiOrder[`${item[0]}时`] = item[1] + '笔'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
carResList: carResList,
|
||||
carRealResList: carRealResList,
|
||||
orderResList: orderResList,
|
||||
orderRealResList: orderRealResList
|
||||
}
|
||||
|
||||
|
||||
let ConsumptionConversionAI = sessionStorage.getItem('ConsumptionConversionAI')
|
||||
if (ConsumptionConversionAI) { } else {
|
||||
let aiObj: any = {
|
||||
"时段车流": aiObjCar,
|
||||
"时段客单": aiOrder
|
||||
}
|
||||
sessionStorage.setItem("ConsumptionConversionAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
legend: {
|
||||
top: 0, // 距离容器底部距离
|
||||
@ -185,91 +271,9 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: any = []
|
||||
let carResList: any = []
|
||||
let carRealResList: any = []
|
||||
let orderResList: any = []
|
||||
let orderRealResList: any = []
|
||||
|
||||
const req: any = {
|
||||
Province_Code: '530000',
|
||||
// Province_Code: '340000',
|
||||
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
|
||||
Serverpart_ID: ''
|
||||
}
|
||||
|
||||
let ConsumptionConversion = sessionStorage.getItem('ConsumptionConversion')
|
||||
let data: any = []
|
||||
if (ConsumptionConversion) {
|
||||
data = JSON.parse(ConsumptionConversion)
|
||||
} else {
|
||||
data = await handleGetTransactionConvert(req)
|
||||
sessionStorage.setItem("ConsumptionConversion", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
|
||||
// const data = await handleGetTransactionConvert(req)
|
||||
|
||||
|
||||
let carList = data.BayonetList.data
|
||||
|
||||
let orderList = data.TransactionList.data
|
||||
|
||||
let aiObjCar: any = {}
|
||||
let aiOrder: any = {}
|
||||
|
||||
if (carList && carList.length > 0) {
|
||||
carList.forEach((item: any) => {
|
||||
carResList.push((item[1]))
|
||||
carRealResList.push(item[1])
|
||||
aiObjCar[`${item[0]}时`] = item[1] + '辆'
|
||||
})
|
||||
}
|
||||
|
||||
if (orderList && orderList.length > 0) {
|
||||
orderList.forEach((item: any) => {
|
||||
category.push(item[0])
|
||||
orderResList.push((item[1]))
|
||||
orderRealResList.push(item[1])
|
||||
aiOrder[`${item[0]}时`] = item[1] + '笔'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
carResList: carResList,
|
||||
carRealResList: carRealResList,
|
||||
orderResList: orderResList,
|
||||
orderRealResList: orderRealResList
|
||||
}
|
||||
|
||||
|
||||
let ConsumptionConversionAI = sessionStorage.getItem('ConsumptionConversionAI')
|
||||
if (ConsumptionConversionAI) { } else {
|
||||
let aiObj: any = {
|
||||
"时段车流": aiObjCar,
|
||||
"时段客单": aiOrder
|
||||
}
|
||||
sessionStorage.setItem("ConsumptionConversionAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
|
||||
return res
|
||||
return option
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
@ -279,7 +283,18 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -35,66 +35,7 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 5]
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "%",
|
||||
show: true, // 显式启用 Y 轴（即使默认也建议写上）
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 确保名称颜色可见
|
||||
padding: [0, 0, 0, 0] // 调整名称位置
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0,
|
||||
show: true // 显式启用刻度标签
|
||||
},
|
||||
axisLine: {
|
||||
show: true, // 显式启用轴线
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0 // 强制显示所有标签
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
series: res.seriesData,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
@ -179,7 +120,82 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
legend: {
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 5]
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "%",
|
||||
show: true, // 显式启用 Y 轴（即使默认也建议写上）
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 确保名称颜色可见
|
||||
padding: [0, 0, 0, 0] // 调整名称位置
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0,
|
||||
show: true // 显式启用刻度标签
|
||||
},
|
||||
axisLine: {
|
||||
show: true, // 显式启用轴线
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0 // 强制显示所有标签
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
series: res.seriesData,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -34,6 +34,73 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
|
||||
const req: any = {
|
||||
Province_Code: '530000',
|
||||
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
|
||||
Serverpart_ID: '',
|
||||
TimeSpan: 1
|
||||
}
|
||||
|
||||
|
||||
let ConsumptionPeriod = sessionStorage.getItem('ConsumptionPeriod')
|
||||
let data: any = []
|
||||
if (ConsumptionPeriod) {
|
||||
data = JSON.parse(ConsumptionPeriod)
|
||||
} else {
|
||||
data = await handleGetTransactionTimeAnalysis(req)
|
||||
sessionStorage.setItem("ConsumptionPeriod", JSON.stringify(data))
|
||||
}
|
||||
|
||||
// const data = await handleGetTransactionTimeAnalysis(req)
|
||||
|
||||
let aiObj: any = {}
|
||||
if (data && data.length > 0) {
|
||||
// 拿到笔数的合计
|
||||
let orderSum: number = 0
|
||||
data.forEach((item: any) => {
|
||||
orderSum += Number(item.data)
|
||||
})
|
||||
|
||||
// data 是笔数 key 是金额
|
||||
data.forEach((item: any, index: number) => {
|
||||
if (index < 10) {
|
||||
category.push(`0${index}:00`)
|
||||
} else {
|
||||
category.push(`${index}:00`)
|
||||
}
|
||||
|
||||
seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
|
||||
aiObj[`${item.name}时`] = item.data + '单'
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,
|
||||
}
|
||||
|
||||
let ConsumptionPeriodAI = sessionStorage.getItem('ConsumptionPeriodAI')
|
||||
if (ConsumptionPeriodAI) { } else {
|
||||
sessionStorage.setItem("ConsumptionPeriodAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -119,72 +186,9 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
|
||||
const req: any = {
|
||||
Province_Code: '530000',
|
||||
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
|
||||
Serverpart_ID: '',
|
||||
TimeSpan: 1
|
||||
}
|
||||
|
||||
|
||||
let ConsumptionPeriod = sessionStorage.getItem('ConsumptionPeriod')
|
||||
let data: any = []
|
||||
if (ConsumptionPeriod) {
|
||||
data = JSON.parse(ConsumptionPeriod)
|
||||
} else {
|
||||
data = await handleGetTransactionTimeAnalysis(req)
|
||||
sessionStorage.setItem("ConsumptionPeriod", JSON.stringify(data))
|
||||
}
|
||||
|
||||
// const data = await handleGetTransactionTimeAnalysis(req)
|
||||
|
||||
let aiObj: any = {}
|
||||
if (data && data.length > 0) {
|
||||
// 拿到笔数的合计
|
||||
let orderSum: number = 0
|
||||
data.forEach((item: any) => {
|
||||
orderSum += Number(item.data)
|
||||
})
|
||||
|
||||
// data 是笔数 key 是金额
|
||||
data.forEach((item: any, index: number) => {
|
||||
if (index < 10) {
|
||||
category.push(`0${index}:00`)
|
||||
} else {
|
||||
category.push(`${index}:00`)
|
||||
}
|
||||
|
||||
seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
|
||||
aiObj[`${item.name}时`] = item.data + '单'
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,
|
||||
}
|
||||
|
||||
let ConsumptionPeriodAI = sessionStorage.getItem('ConsumptionPeriodAI')
|
||||
if (ConsumptionPeriodAI) { } else {
|
||||
sessionStorage.setItem("ConsumptionPeriodAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
return res
|
||||
return option
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
@ -194,6 +198,19 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -59,7 +59,6 @@ const handleGetMapRealData = async () => {
|
||||
serverPartId: props.currentService?.SERVERPART_ID || ""
|
||||
}
|
||||
|
||||
|
||||
let CoreBusinessData = sessionStorage.getItem('CoreBusinessData')
|
||||
let data: any = []
|
||||
if (CoreBusinessData) {
|
||||
@ -228,6 +227,10 @@ const handleGetPonitFixed = (str: string) => {
|
||||
const num = parseFloat(str); // 先转为number类型
|
||||
return isNaN(num) ? "0.00" : num.toFixed(2);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleGetMapRealData
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -42,6 +42,14 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const rect = chartDom.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
|
||||
// 计算center位置（20%，50%）对应的实际像素
|
||||
const centerX = width * 0.2;
|
||||
const centerY = height * 0.5;
|
||||
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
@ -63,8 +71,8 @@ onMounted(async () => {
|
||||
width: 83,
|
||||
height: 83
|
||||
},
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
left: centerX - 41.5,
|
||||
top: centerY - 41.5,
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
@ -73,8 +81,8 @@ onMounted(async () => {
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['85%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
radius: ['55%', '70%'],
|
||||
center: ['20%', '50%'], // 图形向左偏移
|
||||
avoidLabelOverlap: false,
|
||||
|
||||
itemStyle: {
|
||||
@ -91,7 +99,36 @@ onMounted(async () => {
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
]
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 200,
|
||||
top: 'center',
|
||||
align: 'left',
|
||||
itemGap: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
width: 90, // 固定名称宽度
|
||||
align: 'left',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
width: 50, // 固定百分比宽度
|
||||
align: 'right',
|
||||
padding: [0, 10, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name: any) {
|
||||
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
|
||||
|
||||
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
@ -165,19 +202,17 @@ onBeforeUnmount(() => {
|
||||
<div style="display: flex;margin-top: 30px;align-items: center;">
|
||||
<div class="CoreCategory" id="CoreCategory"></div>
|
||||
|
||||
<div class="CoreCategoryDataList">
|
||||
<!-- <div class="CoreCategoryDataList">
|
||||
<div class="CoreCategoryDataBox" v-for="(item, index) in lengedList" :key="index">
|
||||
<div class="CoreCategoryDataLeftBox">
|
||||
<div class="CoreCategoryItem">
|
||||
<div class="CoreCategoryItemLeged" :style="{ background: colorList[index] }"></div>
|
||||
<div class="CoreCategoryItemLabel">{{ item.name }}</div>
|
||||
<div class="CoreCategoryItemLabel" style="margin-left: 8px;">{{ item.percent }}%</div>
|
||||
<!-- <div class="CoreCategoryItemLabel" style="margin-left: 8px;">{{ item.value }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,6 +40,112 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到年龄数据
|
||||
const handleGetData = async () => {
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
let percentData: any = []
|
||||
|
||||
const req: any = {
|
||||
provinceCode: '530000',
|
||||
statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
|
||||
}
|
||||
|
||||
|
||||
|
||||
let CustomerAgeGroup = sessionStorage.getItem('CustomerAgeGroup')
|
||||
let data: any = []
|
||||
if (CustomerAgeGroup) {
|
||||
data = JSON.parse(CustomerAgeGroup)
|
||||
} else {
|
||||
data = await handleGetCustomerAgeRatio(req)
|
||||
sessionStorage.setItem("CustomerAgeGroup", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
// const data = await handleGetCustomerAgeRatio(req)
|
||||
|
||||
console.log('fdisfsauifhdsaj', data);
|
||||
|
||||
// for (let i = 0; i < 4; i++) {
|
||||
// let sum: number = (data[0].data[i] + data[1].data[i])
|
||||
// seriesData.push(sum.toFixed(2))
|
||||
// percentData.push((sum / 200 * 100).toFixed(2))
|
||||
// }
|
||||
|
||||
// 男生
|
||||
let seriesDataMan: number[] = []
|
||||
// 女生
|
||||
let seriesDataWoman: number[] = []
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
if (item.name === '男性') {
|
||||
seriesDataMan = item.data
|
||||
} else if (item.name === '女性') {
|
||||
seriesDataWoman = item.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res: any = {
|
||||
// category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
|
||||
category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
|
||||
seriesDataMan: seriesDataMan,// 男生
|
||||
seriesDataWoman: seriesDataWoman// 女生
|
||||
}
|
||||
|
||||
|
||||
let CustomerAgeGroupAI = sessionStorage.getItem('CustomerAgeGroupAI')
|
||||
if (CustomerAgeGroupAI) { } else {
|
||||
let aiRes: any = {}
|
||||
|
||||
for (let i = 0; i < res.category.length; i++) {
|
||||
aiRes[res.category[i]] = {
|
||||
"男性": seriesDataMan[i] + '%',
|
||||
"女性": seriesDataWoman[i] + '%',
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem("CustomerAgeGroupAI", JSON.stringify(aiRes))
|
||||
}
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
// 重绘所有图表的方法
|
||||
const resizeAllCharts = () => {
|
||||
// 获取当前显示的tab下的所有echarts实例
|
||||
const charts = document.querySelectorAll(`#CustomerAgeGroup`)
|
||||
charts.forEach(chart => {
|
||||
const instance = echarts.getInstanceByDom(chart as HTMLElement)
|
||||
if (instance) {
|
||||
instance.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeAllCharts)
|
||||
})
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
@ -170,111 +276,23 @@ onMounted(async () => {
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到年龄数据
|
||||
const handleGetData = async () => {
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
let percentData: any = []
|
||||
|
||||
const req: any = {
|
||||
provinceCode: '530000',
|
||||
statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
|
||||
}
|
||||
|
||||
|
||||
|
||||
let CustomerAgeGroup = sessionStorage.getItem('CustomerAgeGroup')
|
||||
let data: any = []
|
||||
if (CustomerAgeGroup) {
|
||||
data = JSON.parse(CustomerAgeGroup)
|
||||
} else {
|
||||
data = await handleGetCustomerAgeRatio(req)
|
||||
sessionStorage.setItem("CustomerAgeGroup", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
// const data = await handleGetCustomerAgeRatio(req)
|
||||
|
||||
console.log('fdisfsauifhdsaj', data);
|
||||
|
||||
// for (let i = 0; i < 4; i++) {
|
||||
// let sum: number = (data[0].data[i] + data[1].data[i])
|
||||
// seriesData.push(sum.toFixed(2))
|
||||
// percentData.push((sum / 200 * 100).toFixed(2))
|
||||
// }
|
||||
|
||||
// 男生
|
||||
let seriesDataMan: number[] = []
|
||||
// 女生
|
||||
let seriesDataWoman: number[] = []
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
if (item.name === '男性') {
|
||||
seriesDataMan = item.data
|
||||
} else if (item.name === '女性') {
|
||||
seriesDataWoman = item.data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res: any = {
|
||||
// category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
|
||||
category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
|
||||
seriesDataMan: seriesDataMan,// 男生
|
||||
seriesDataWoman: seriesDataWoman// 女生
|
||||
}
|
||||
|
||||
|
||||
let CustomerAgeGroupAI = sessionStorage.getItem('CustomerAgeGroupAI')
|
||||
if (CustomerAgeGroupAI) { } else {
|
||||
let aiRes: any = {}
|
||||
|
||||
for (let i = 0; i < res.category.length; i++) {
|
||||
aiRes[res.category[i]] = {
|
||||
"男性": seriesDataMan[i] + '%',
|
||||
"女性": seriesDataWoman[i] + '%',
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem("CustomerAgeGroupAI", JSON.stringify(aiRes))
|
||||
}
|
||||
|
||||
return res
|
||||
return option
|
||||
}
|
||||
|
||||
// 重绘所有图表的方法
|
||||
const resizeAllCharts = () => {
|
||||
// 获取当前显示的tab下的所有echarts实例
|
||||
const charts = document.querySelectorAll(`#CustomerAgeGroup`)
|
||||
charts.forEach(chart => {
|
||||
const instance = echarts.getInstanceByDom(chart as HTMLElement)
|
||||
if (instance) {
|
||||
instance.resize()
|
||||
}
|
||||
})
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resizeAllCharts)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -54,6 +54,80 @@ const handleGoMounted = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
}
|
||||
|
||||
const handleGetData = async () => {
|
||||
// const req: any = {
|
||||
// statisticsType: 1,
|
||||
// startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
|
||||
// endMonth: moment().subtract(1, 'm').format('YYYYMM'),
|
||||
// provinceCode: '530000',
|
||||
// serverpartId: props.currentService?.SERVERPART_ID || "",
|
||||
// sortStr: 'TOTAL_COUNT desc'
|
||||
// }
|
||||
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||
// StatisticsDate: '2025-04-30',
|
||||
// BusinessTradeIds: -1,
|
||||
ServerpartId: props.currentService?.SERVERPART_ID || ""
|
||||
}
|
||||
|
||||
|
||||
let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
|
||||
let data: any = []
|
||||
if (CustomerConsumptionPreferences) {
|
||||
data = JSON.parse(CustomerConsumptionPreferences)
|
||||
} else {
|
||||
// data = await handleGetCustomerSaleRatio(req)
|
||||
data = await handleGetBusinessTradeRevenue(req)
|
||||
sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
|
||||
}
|
||||
|
||||
// const data = await handleGetCustomerSaleRatio(req)
|
||||
|
||||
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
|
||||
let aiObj: any = {}
|
||||
|
||||
// CustomerSaleList
|
||||
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
|
||||
let list = data.BusinessTradeRank.slice(0, 10)
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.name)
|
||||
seriesData.push(item.value)
|
||||
realData.push(item.value)
|
||||
aiObj[item.name] = `占比${item.value}%`
|
||||
})
|
||||
}
|
||||
|
||||
let CustomerConsumptionPreferencesAI = sessionStorage.getItem('CustomerConsumptionPreferencesAI')
|
||||
if (CustomerConsumptionPreferencesAI) { } else {
|
||||
|
||||
sessionStorage.setItem("CustomerConsumptionPreferencesAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
category: category,
|
||||
seriesData: seriesData,
|
||||
realData: realData,
|
||||
}
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -153,84 +227,27 @@ const handleGoMounted = async () => {
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
return option
|
||||
}
|
||||
|
||||
const handleGetData = async () => {
|
||||
// const req: any = {
|
||||
// statisticsType: 1,
|
||||
// startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
|
||||
// endMonth: moment().subtract(1, 'm').format('YYYYMM'),
|
||||
// provinceCode: '530000',
|
||||
// serverpartId: props.currentService?.SERVERPART_ID || "",
|
||||
// sortStr: 'TOTAL_COUNT desc'
|
||||
// }
|
||||
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||
// StatisticsDate: '2025-04-30',
|
||||
// BusinessTradeIds: -1,
|
||||
ServerpartId: props.currentService?.SERVERPART_ID || ""
|
||||
}
|
||||
|
||||
|
||||
let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
|
||||
let data: any = []
|
||||
if (CustomerConsumptionPreferences) {
|
||||
data = JSON.parse(CustomerConsumptionPreferences)
|
||||
} else {
|
||||
// data = await handleGetCustomerSaleRatio(req)
|
||||
data = await handleGetBusinessTradeRevenue(req)
|
||||
sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
|
||||
}
|
||||
|
||||
// const data = await handleGetCustomerSaleRatio(req)
|
||||
|
||||
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
|
||||
let aiObj: any = {}
|
||||
|
||||
// CustomerSaleList
|
||||
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
|
||||
let list = data.BusinessTradeRank.slice(0, 10)
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.name)
|
||||
seriesData.push(item.value)
|
||||
realData.push(item.value)
|
||||
aiObj[item.name] = `占比${item.value}%`
|
||||
})
|
||||
}
|
||||
|
||||
let CustomerConsumptionPreferencesAI = sessionStorage.getItem('CustomerConsumptionPreferencesAI')
|
||||
if (CustomerConsumptionPreferencesAI) { } else {
|
||||
|
||||
sessionStorage.setItem("CustomerConsumptionPreferencesAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
category: category,
|
||||
seriesData: seriesData,
|
||||
realData: realData,
|
||||
}
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -57,7 +57,78 @@ const handleShowCharts = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
}
|
||||
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
provinceCode: "530000",
|
||||
statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
serverpartId: props.currentService?.SERVERPART_ID || "",
|
||||
}
|
||||
|
||||
let CustomerGroup = sessionStorage.getItem('CustomerGroup')
|
||||
let data: any = []
|
||||
if (CustomerGroup) {
|
||||
data = JSON.parse(CustomerGroup)
|
||||
} else {
|
||||
data = await handleGetCustomerGroupRatio(req)
|
||||
sessionStorage.setItem("CustomerGroup", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
// const data = await handleGetCustomerGroupRatio(req)
|
||||
|
||||
let res: any = []
|
||||
let aiObj: any = {}
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
// let list: any = []
|
||||
let obj: any = {}
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
subItem.push(item.name)
|
||||
res.push(subItem)
|
||||
obj[`${subItem[0]}岁`] = `交易金额${subItem[1]}元，占比${subItem[2]}%`
|
||||
})
|
||||
}
|
||||
aiObj[item.name] = obj
|
||||
// res.push(list)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let CustomerGroupAI = sessionStorage.getItem('CustomerGroupAI')
|
||||
if (CustomerGroupAI) { } else {
|
||||
sessionStorage.setItem("CustomerGroupAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
// 重绘所有图表的方法
|
||||
const resizeAllCharts = () => {
|
||||
// 获取当前显示的tab下的所有echarts实例
|
||||
const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
|
||||
charts.forEach(chart => {
|
||||
const instance = echarts.getInstanceByDom(chart as HTMLElement)
|
||||
if (instance) {
|
||||
instance.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
grid: {
|
||||
left: '0',
|
||||
@ -157,81 +228,26 @@ const handleShowCharts = async () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
return option
|
||||
}
|
||||
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
provinceCode: "530000",
|
||||
statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
serverpartId: props.currentService?.SERVERPART_ID || "",
|
||||
}
|
||||
|
||||
let CustomerGroup = sessionStorage.getItem('CustomerGroup')
|
||||
let data: any = []
|
||||
if (CustomerGroup) {
|
||||
data = JSON.parse(CustomerGroup)
|
||||
} else {
|
||||
data = await handleGetCustomerGroupRatio(req)
|
||||
sessionStorage.setItem("CustomerGroup", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
// const data = await handleGetCustomerGroupRatio(req)
|
||||
|
||||
let res: any = []
|
||||
let aiObj: any = {}
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
// let list: any = []
|
||||
let obj: any = {}
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
subItem.push(item.name)
|
||||
res.push(subItem)
|
||||
obj[`${subItem[0]}岁`] = `交易金额${subItem[1]}元，占比${subItem[2]}%`
|
||||
})
|
||||
}
|
||||
aiObj[item.name] = obj
|
||||
// res.push(list)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let CustomerGroupAI = sessionStorage.getItem('CustomerGroupAI')
|
||||
if (CustomerGroupAI) { } else {
|
||||
sessionStorage.setItem("CustomerGroupAI", JSON.stringify(aiObj))
|
||||
}
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
// 重绘所有图表的方法
|
||||
const resizeAllCharts = () => {
|
||||
// 获取当前显示的tab下的所有echarts实例
|
||||
const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
|
||||
charts.forEach(chart => {
|
||||
const instance = echarts.getInstanceByDom(chart as HTMLElement)
|
||||
if (instance) {
|
||||
instance.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -67,76 +67,7 @@ const handleGoMounted = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}'
|
||||
},
|
||||
legend: [ // 使用两个legend对象分别控制
|
||||
// 第一行：外圈圆环图例
|
||||
{
|
||||
data: res.bigType.map((name: string) => ({
|
||||
name,
|
||||
icon: 'circle'
|
||||
})),
|
||||
orient: 'horizontal',
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
padding: [0, 0, 60, 0], // 下边距为内圈图例留空间
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
// 第二行：内圈饼图图例
|
||||
{
|
||||
data: res.smallType.map((name: string) => ({
|
||||
name,
|
||||
icon: 'rect'
|
||||
})),
|
||||
orient: 'horizontal',
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
textStyle: { color: '#fff' },
|
||||
padding: [0, 0, 0, 0], // 下边距为内圈图例留空间
|
||||
}
|
||||
],
|
||||
series: [
|
||||
// 外圈环形图
|
||||
{
|
||||
name: '外圈数据',
|
||||
type: 'pie',
|
||||
radius: ['55%', '65%'],
|
||||
center: ['50%', '35%'], // 稍微上移给图例留空间
|
||||
data: res.bigData.map((item: any, index: any) => ({
|
||||
...item,
|
||||
itemStyle: { color: bigDataColor[index] } // 自定义颜色
|
||||
})),
|
||||
// data: [
|
||||
// { value: 335, name: 'A类' },
|
||||
// { value: 310, name: 'B类' },
|
||||
// { value: 234, name: 'C类' },
|
||||
// { value: 135, name: 'D类' }
|
||||
// ],
|
||||
label: { show: false }
|
||||
},
|
||||
// 内圈饼图
|
||||
{
|
||||
name: '内圈数据',
|
||||
type: 'pie',
|
||||
radius: ['0%', '40%'],
|
||||
center: ['50%', '35%'], // 与外圈同中心
|
||||
data: res.smallData.map((item: any, index: any) => ({
|
||||
...item,
|
||||
itemStyle: { color: smallDataColor[index] } // 自定义颜色
|
||||
})),
|
||||
// data: [
|
||||
// { value: 100, name: '子类1' },
|
||||
// { value: 200, name: '子类2' },
|
||||
// { value: 300, name: '子类3' }
|
||||
// ],
|
||||
label: { show: false }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
@ -218,6 +149,90 @@ onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}'
|
||||
},
|
||||
legend: [ // 使用两个legend对象分别控制
|
||||
// 第一行：外圈圆环图例
|
||||
{
|
||||
data: res.bigType.map((name: string) => ({
|
||||
name,
|
||||
icon: 'circle'
|
||||
})),
|
||||
orient: 'horizontal',
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
padding: [0, 0, 60, 0], // 下边距为内圈图例留空间
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
// 第二行：内圈饼图图例
|
||||
{
|
||||
data: res.smallType.map((name: string) => ({
|
||||
name,
|
||||
icon: 'rect'
|
||||
})),
|
||||
orient: 'horizontal',
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
textStyle: { color: '#fff' },
|
||||
padding: [0, 0, 0, 0], // 下边距为内圈图例留空间
|
||||
}
|
||||
],
|
||||
series: [
|
||||
// 外圈环形图
|
||||
{
|
||||
name: '外圈数据',
|
||||
type: 'pie',
|
||||
radius: ['55%', '65%'],
|
||||
center: ['50%', '35%'], // 稍微上移给图例留空间
|
||||
data: res.bigData.map((item: any, index: any) => ({
|
||||
...item,
|
||||
itemStyle: { color: bigDataColor[index] } // 自定义颜色
|
||||
})),
|
||||
// data: [
|
||||
// { value: 335, name: 'A类' },
|
||||
// { value: 310, name: 'B类' },
|
||||
// { value: 234, name: 'C类' },
|
||||
// { value: 135, name: 'D类' }
|
||||
// ],
|
||||
label: { show: false }
|
||||
},
|
||||
// 内圈饼图
|
||||
{
|
||||
name: '内圈数据',
|
||||
type: 'pie',
|
||||
radius: ['0%', '40%'],
|
||||
center: ['50%', '35%'], // 与外圈同中心
|
||||
data: res.smallData.map((item: any, index: any) => ({
|
||||
...item,
|
||||
itemStyle: { color: smallDataColor[index] } // 自定义颜色
|
||||
})),
|
||||
// data: [
|
||||
// { value: 100, name: '子类1' },
|
||||
// { value: 200, name: '子类2' },
|
||||
// { value: 300, name: '子类3' }
|
||||
// ],
|
||||
label: { show: false }
|
||||
}
|
||||
]
|
||||
};
|
||||
return option
|
||||
}
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetRealData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import './GenderCustomerGroup.less'
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
@ -37,82 +37,7 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const rect = chartDom.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
|
||||
// 计算center位置（20%，50%）对应的实际像素
|
||||
const centerX = width * 0.5;
|
||||
const centerY = height * 0.65;
|
||||
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: '#fff', // 白色背景
|
||||
borderColor: '#fff', // 白色边框
|
||||
textStyle: {
|
||||
color: '#333', // 文字颜色
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.name}</div>
|
||||
`;
|
||||
// ${params.value}%
|
||||
}
|
||||
},
|
||||
graphic: { // 关键配置：在图表中心添加图片
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: GenderCenter,
|
||||
width: 60,
|
||||
height: 60
|
||||
},
|
||||
left: centerX - 30,
|
||||
top: centerY - 30,
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '70%'],
|
||||
center: ['50%', '65%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色列表
|
||||
const colorList = ['#0094FF', '#FF5E5E'];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: res.legendData,
|
||||
// bottom: 0,
|
||||
// left: 'center',
|
||||
top: 0,
|
||||
right: 0,
|
||||
orient: 'horizontal', // 水平排列（默认值，可省略）
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
}
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
@ -181,6 +106,100 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const chartDom = document.getElementById('GenderCustomerGroup');
|
||||
if (!chartDom) return {};
|
||||
const rect = chartDom.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
|
||||
// 计算center位置（20%，50%）对应的实际像素
|
||||
const centerX = width * 0.5;
|
||||
const centerY = height * 0.65;
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: '#fff', // 白色背景
|
||||
borderColor: '#fff', // 白色边框
|
||||
textStyle: {
|
||||
color: '#333', // 文字颜色
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.name}</div>
|
||||
`;
|
||||
// ${params.value}%
|
||||
}
|
||||
},
|
||||
graphic: { // 关键配置：在图表中心添加图片
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: GenderCenter,
|
||||
width: 60,
|
||||
height: 60
|
||||
},
|
||||
left: centerX - 30,
|
||||
top: centerY - 30,
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '70%'],
|
||||
center: ['50%', '65%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色列表
|
||||
const colorList = ['#0094FF', '#FF5E5E'];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: res.legendData,
|
||||
// bottom: 0,
|
||||
// left: 'center',
|
||||
top: 0,
|
||||
right: 0,
|
||||
orient: 'horizontal', // 水平排列（默认值，可省略）
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
}
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetSectionFlowCount()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -43,6 +43,68 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
});
|
||||
|
||||
// 拿到热门商品榜单
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
|
||||
|
||||
const req: any = {
|
||||
action_type: "getCommoditySaleSort",
|
||||
province_code: 5564,
|
||||
rowNum: props?.pageType === 'left' ? 5 : 10
|
||||
}
|
||||
|
||||
let HotProductList = sessionStorage.getItem('HotProductList')
|
||||
let data: any = []
|
||||
if (HotProductList) {
|
||||
data = JSON.parse(HotProductList)
|
||||
} else {
|
||||
data = await handleGetSalesRank(req)
|
||||
sessionStorage.setItem("HotProductList", JSON.stringify(data))
|
||||
}
|
||||
|
||||
// const data = await handleGetSalesRank(req)
|
||||
|
||||
let list: any = data.COMMODITYSALE_DESC
|
||||
list.reverse()
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.COMMODITY_NAME)
|
||||
seriesData.push(item.SELLCOUNT)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData
|
||||
}
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
yAxis: { // 改为 yAxis 显示分类数据
|
||||
type: 'category',
|
||||
@ -118,64 +180,20 @@ onMounted(async () => {
|
||||
// + '笔'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
});
|
||||
|
||||
// 拿到热门商品榜单
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
|
||||
|
||||
const req: any = {
|
||||
action_type: "getCommoditySaleSort",
|
||||
province_code: 5564,
|
||||
rowNum: props?.pageType === 'left' ? 5 : 10
|
||||
}
|
||||
|
||||
let HotProductList = sessionStorage.getItem('HotProductList')
|
||||
let data: any = []
|
||||
if (HotProductList) {
|
||||
data = JSON.parse(HotProductList)
|
||||
} else {
|
||||
data = await handleGetSalesRank(req)
|
||||
sessionStorage.setItem("HotProductList", JSON.stringify(data))
|
||||
}
|
||||
|
||||
// const data = await handleGetSalesRank(req)
|
||||
|
||||
let list: any = data.COMMODITYSALE_DESC
|
||||
list.reverse()
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.COMMODITY_NAME)
|
||||
seriesData.push(item.SELLCOUNT)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData
|
||||
}
|
||||
|
||||
|
||||
return res
|
||||
return option
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -37,6 +37,75 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 修改选择的季月年
|
||||
const handleChangeType = async (value: number) => {
|
||||
selectType.value = value
|
||||
}
|
||||
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: string[] = []
|
||||
let TicketCountData: number[] = [] // 订单笔数
|
||||
let SellAmountData: string[] = [] // 交易金额
|
||||
|
||||
const req: any = {
|
||||
DataType: 2,// 1 日度 2 月度
|
||||
ProvinceCode: '530000',
|
||||
StartMonth: moment().startOf('y').format('YYYYMM'),
|
||||
EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
}
|
||||
|
||||
console.log('dkosajdaihfysudafhs', req);
|
||||
|
||||
// const data = await handleGetMallOrderSummary(req)
|
||||
|
||||
let MallOrderStatistics = sessionStorage.getItem('MallOrderStatistics')
|
||||
let data: any = []
|
||||
if (MallOrderStatistics) {
|
||||
data = JSON.parse(MallOrderStatistics)
|
||||
} else {
|
||||
data = await handleGetMallOrderSummary(req)
|
||||
sessionStorage.setItem("MallOrderStatistics", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
|
||||
console.log('gjisayudshfsdafdfdasfasd', data);
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
category.push(`${item.StatisticsMonth}月`)
|
||||
TicketCountData.push(item.TicketCount)
|
||||
SellAmountData.push(item.SellAmount)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
TicketCountData: TicketCountData,// 订单笔数
|
||||
SellAmountData: SellAmountData// 交易金额
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -133,79 +202,26 @@ onMounted(async () => {
|
||||
},
|
||||
color: ['#FF5E5E', '#FF9500']
|
||||
};
|
||||
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 修改选择的季月年
|
||||
const handleChangeType = async (value: number) => {
|
||||
selectType.value = value
|
||||
return option
|
||||
}
|
||||
|
||||
const handleGetData = async () => {
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
let category: string[] = []
|
||||
let TicketCountData: number[] = [] // 订单笔数
|
||||
let SellAmountData: string[] = [] // 交易金额
|
||||
|
||||
const req: any = {
|
||||
DataType: 2,// 1 日度 2 月度
|
||||
ProvinceCode: '530000',
|
||||
StartMonth: moment().startOf('y').format('YYYYMM'),
|
||||
EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
}
|
||||
|
||||
console.log('dkosajdaihfysudafhs', req);
|
||||
|
||||
// const data = await handleGetMallOrderSummary(req)
|
||||
|
||||
let MallOrderStatistics = sessionStorage.getItem('MallOrderStatistics')
|
||||
let data: any = []
|
||||
if (MallOrderStatistics) {
|
||||
data = JSON.parse(MallOrderStatistics)
|
||||
} else {
|
||||
data = await handleGetMallOrderSummary(req)
|
||||
sessionStorage.setItem("MallOrderStatistics", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
|
||||
console.log('gjisayudshfsdafdfdasfasd', data);
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
category.push(`${item.StatisticsMonth}月`)
|
||||
TicketCountData.push(item.TicketCount)
|
||||
SellAmountData.push(item.SellAmount)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
TicketCountData: TicketCountData,// 订单笔数
|
||||
SellAmountData: SellAmountData// 交易金额
|
||||
}
|
||||
return res
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<template>
|
||||
<div class="MallOrderStatisticsBox">
|
||||
<SmallTitle :title="'商城订单统计'">
|
||||
<!-- <template #extra>
|
||||
|
||||
@ -21,8 +21,9 @@ const handleGetData = async () => {
|
||||
ProvinceCode: "530000",
|
||||
}
|
||||
|
||||
|
||||
let OverviewOfServiceArea = sessionStorage.getItem('OverviewOfServiceArea')
|
||||
console.log('OverviewOfServiceArea', OverviewOfServiceArea);
|
||||
|
||||
let data: any = []
|
||||
if (OverviewOfServiceArea) {
|
||||
data = JSON.parse(OverviewOfServiceArea)
|
||||
@ -30,7 +31,6 @@ const handleGetData = async () => {
|
||||
data = await handleGetServerpartServiceSummary(req)
|
||||
sessionStorage.setItem("OverviewOfServiceArea", JSON.stringify(data))
|
||||
}
|
||||
|
||||
console.log('fhdushgsu9dgvuisdvgsudvhnjldsfas', data);
|
||||
|
||||
// 因为之前不是这个接口 已经写了一份 为了不做过多的修改 按照老的 赋值走
|
||||
@ -60,6 +60,8 @@ const handleGetData = async () => {
|
||||
let WaterCount: number = data.WaterCount
|
||||
// 休息区数量
|
||||
let RestAreaCount: number = data.RestAreaCount
|
||||
// 关停
|
||||
let shutDown: number = data.ClosedCountCount
|
||||
// 总数
|
||||
let ServerpartTotalCount: number = data.ServerpartTotalCount
|
||||
|
||||
@ -75,6 +77,7 @@ const handleGetData = async () => {
|
||||
"加水站": data.WaterStationCount,
|
||||
"观景台": data.ViewingDeckCount,
|
||||
"休息区": data.RestAreaCount,
|
||||
"关停": data.shutDown,
|
||||
"加油站": data.REFUELINGGUNTotal,
|
||||
"充电桩": data.ChargingStationTotal,
|
||||
"司机之家": data.HASPILOTLOUNGETotal,
|
||||
@ -150,7 +153,8 @@ const handleGetData = async () => {
|
||||
ParkingServiceCount: ParkingServiceCount,
|
||||
WaterCount: WaterCount,
|
||||
ServerpartTotalCount: ServerpartTotalCount,
|
||||
RestAreaCount: RestAreaCount
|
||||
RestAreaCount: RestAreaCount,
|
||||
shutDown: shutDown
|
||||
}
|
||||
console.log('fdjsifjasjfs', res);
|
||||
|
||||
@ -214,6 +218,10 @@ const handleGetData = async () => {
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
handleGetData
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -241,15 +249,16 @@ const handleGetData = async () => {
|
||||
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #ef5a0d;">{{
|
||||
serviceInfo?.ParkingServiceCount || "0" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="OverviewOfServiceAreaContentTop">
|
||||
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
|
||||
<div class="OverviewOfServiceAreaContentTopItem">
|
||||
<div class="OverviewOfServiceAreaContentTopItemLabel">加水站/座</div>
|
||||
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #1aba80;">{{
|
||||
serviceInfo?.WaterStationCount || "0" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="OverviewOfServiceAreaContentTop">
|
||||
|
||||
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
|
||||
<div class="OverviewOfServiceAreaContentTopItemLabel">观景台/座</div>
|
||||
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #f41a09;">{{
|
||||
@ -260,6 +269,11 @@ const handleGetData = async () => {
|
||||
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #b5ebf7;">{{
|
||||
serviceInfo?.RestAreaCount || "0" }}</div>
|
||||
</div>
|
||||
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
|
||||
<div class="OverviewOfServiceAreaContentTopItemLabel">关停/座</div>
|
||||
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #fff;">{{
|
||||
serviceInfo?.shutDown || "0" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -269,12 +283,12 @@ const handleGetData = async () => {
|
||||
<div class="OverviewOfServiceAreaContentBottomItem">
|
||||
<div class="OverviewOfServiceAreaContentBottomItemLabel">加油站/座</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.REFUELINGGUNTotal || "0"
|
||||
}}</div>
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItem">
|
||||
<div class="OverviewOfServiceAreaContentBottomItemLabel">充电桩/座</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ChargingStationTotal || "0"
|
||||
}}</div>
|
||||
}}</div>
|
||||
</div>
|
||||
<!-- <div class="OverviewOfServiceAreaContentBottomItem">
|
||||
<div class="OverviewOfServiceAreaContentBottomItemLabel">停车位/座</div>
|
||||
@ -289,17 +303,17 @@ const handleGetData = async () => {
|
||||
<div class="OverviewOfServiceAreaContentBottomItem">
|
||||
<div class="OverviewOfServiceAreaContentBottomItemLabel">母婴室/座</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.NursingRoomTotal || "0"
|
||||
}}</div>
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItem">
|
||||
<div class="OverviewOfServiceAreaContentBottomItemLabel">尿素/座</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.URECOUNTTotal || "0"
|
||||
}}</div>
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItem">
|
||||
<div class="OverviewOfServiceAreaContentBottomItemLabel">加水/座</div>
|
||||
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.WaterCount || "0"
|
||||
}}</div>
|
||||
}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,96 +36,7 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
console.log('params', params);
|
||||
let str: string = `<div>${params?.seriesName}：</div>`
|
||||
for (let i = 0; i < res.category.length; i++) {
|
||||
str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
|
||||
// list.push({ label: res.category[i], value: params.value + '%' })
|
||||
}
|
||||
return `<div>${str}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
indicator: res.category,
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
radius: '60%', // 调整雷达图大小，留出空间给文字
|
||||
center: ['50%', '65%'], // 2. 确保居中
|
||||
axisName: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
padding: 10
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(25, 46, 76, 1)',
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "男性",
|
||||
type: 'radar',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
},
|
||||
data: res.seriesData,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#0094FF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "女性",
|
||||
type: 'radar',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
},
|
||||
data: res.seriesDataMan,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#FF5E5E'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: ['男性', '女性'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
top: 0,
|
||||
right: 0
|
||||
// bottom: -5,
|
||||
// left: 'center',
|
||||
},
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
@ -235,6 +146,112 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item',
|
||||
formatter: function (params: any) {
|
||||
console.log('params', params);
|
||||
let str: string = `<div>${params?.seriesName}：</div>`
|
||||
for (let i = 0; i < res.category.length; i++) {
|
||||
str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
|
||||
// list.push({ label: res.category[i], value: params.value + '%' })
|
||||
}
|
||||
return `<div>${str}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
indicator: res.category,
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
radius: '60%', // 调整雷达图大小，留出空间给文字
|
||||
center: ['50%', '65%'], // 2. 确保居中
|
||||
axisName: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
padding: 10
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
'rgba(25, 46, 76, 1)',
|
||||
]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(25, 46, 76, 1)',
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "男性",
|
||||
type: 'radar',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
},
|
||||
data: res.seriesData,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#0094FF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "女性",
|
||||
type: 'radar',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
},
|
||||
data: res.seriesDataMan,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#FF5E5E'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
data: ['男性', '女性'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
top: 0,
|
||||
right: 0
|
||||
// bottom: -5,
|
||||
// left: 'center',
|
||||
},
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetSectionFlowCount()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -63,70 +63,7 @@ const handleGoMounted = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex].toLocaleString()}元</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['0%', '70%'],
|
||||
center: ['20%', '50%'], // 图形向左偏移
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.pieData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 200,
|
||||
top: 'center',
|
||||
align: 'left',
|
||||
itemGap: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
width: 90, // 固定名称宽度
|
||||
align: 'left',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
width: 50, // 固定百分比宽度
|
||||
align: 'right',
|
||||
padding: [0, 10, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name: any) {
|
||||
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
|
||||
|
||||
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
|
||||
}
|
||||
}
|
||||
};
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
@ -226,6 +163,87 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex].toLocaleString()}元</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['0%', '70%'],
|
||||
center: ['20%', '50%'], // 图形向左偏移
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.pieData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 200,
|
||||
top: 'center',
|
||||
align: 'left',
|
||||
itemGap: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
width: 90, // 固定名称宽度
|
||||
align: 'left',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
width: 50, // 固定百分比宽度
|
||||
align: 'right',
|
||||
padding: [0, 10, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function (name: any) {
|
||||
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
|
||||
|
||||
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
|
||||
}
|
||||
}
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -52,6 +52,79 @@ onMounted(async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
|
||||
}
|
||||
// const data = await handleGetWelFareSummary(req)
|
||||
|
||||
let ThisMonthBenefits = sessionStorage.getItem('ThisMonthBenefits')
|
||||
let data: any = []
|
||||
if (ThisMonthBenefits) {
|
||||
data = JSON.parse(ThisMonthBenefits)
|
||||
} else {
|
||||
data = await handleGetWelFareSummary(req)
|
||||
sessionStorage.setItem("ThisMonthBenefits", JSON.stringify(data))
|
||||
}
|
||||
|
||||
console.log('fjidsfhasjfasdfdsf', data);
|
||||
|
||||
|
||||
let seriesData: any = []
|
||||
let realData: any = []
|
||||
let category: any = []
|
||||
|
||||
allRealData.value = data
|
||||
|
||||
let list: any = data.WelFareGoodsTypeList.slice(0, 5)
|
||||
if (list && list.length > 0) {
|
||||
let sum: number = 0
|
||||
list.forEach((item: any) => {
|
||||
sum += item.GoodsCount
|
||||
})
|
||||
|
||||
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.GoodsTypeName)
|
||||
seriesData.push({ name: item.GoodsTypeName, value: item.GoodsCount, percent: ((item.GoodsCount / sum) * 100).toFixed(2) })
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData// 真实数据
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const chartDom = document.getElementById('CoreCategory');
|
||||
if (!chartDom) return {};
|
||||
const rect = chartDom.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
|
||||
// 计算center位置（20%，50%）对应的实际像素
|
||||
const centerX = width * 0.21;
|
||||
const centerY = height * 0.5;
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
@ -121,68 +194,23 @@ onMounted(async () => {
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
|
||||
}
|
||||
// const data = await handleGetWelFareSummary(req)
|
||||
|
||||
let ThisMonthBenefits = sessionStorage.getItem('ThisMonthBenefits')
|
||||
let data: any = []
|
||||
if (ThisMonthBenefits) {
|
||||
data = JSON.parse(ThisMonthBenefits)
|
||||
} else {
|
||||
data = await handleGetWelFareSummary(req)
|
||||
sessionStorage.setItem("ThisMonthBenefits", JSON.stringify(data))
|
||||
}
|
||||
|
||||
console.log('fjidsfhasjfasdfdsf', data);
|
||||
|
||||
|
||||
let seriesData: any = []
|
||||
let realData: any = []
|
||||
let category: any = []
|
||||
|
||||
allRealData.value = data
|
||||
|
||||
let list: any = data.WelFareGoodsTypeList.slice(0, 5)
|
||||
if (list && list.length > 0) {
|
||||
let sum: number = 0
|
||||
list.forEach((item: any) => {
|
||||
sum += item.GoodsCount
|
||||
})
|
||||
|
||||
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.GoodsTypeName)
|
||||
seriesData.push({ name: item.GoodsTypeName, value: item.GoodsCount, percent: ((item.GoodsCount / sum) * 100).toFixed(2) })
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData// 真实数据
|
||||
}
|
||||
return res
|
||||
return option
|
||||
}
|
||||
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -39,9 +39,6 @@ const handleGetData = async () => {
|
||||
sessionStorage.setItem("TradingAlert", JSON.stringify(data))
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
console.log('skodpijasidjaslfddfas', data);
|
||||
|
||||
TradingOtherData.value = {
|
||||
@ -76,6 +73,10 @@ const handleGetData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleGetData
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -55,6 +55,14 @@ const handleGoMounted = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option: any = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
}
|
||||
|
||||
// 配置图表的config
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -168,13 +176,10 @@ const handleGoMounted = async () => {
|
||||
type: 'scroll' // 如果图例过长，启用滚动
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
return option
|
||||
}
|
||||
|
||||
// 拿到断面流量数据
|
||||
// 拿到断面流量数据
|
||||
const handleGetSectionFlowCount = async () => {
|
||||
// const req: any = {
|
||||
// // StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
@ -290,6 +295,18 @@ const handleGetSectionFlowCount = async () => {
|
||||
return res
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const handleUpdatePie = async () => {
|
||||
const res = await handleGetSectionFlowCount()
|
||||
// 先清空旧的 series
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const option: any = handleSetConfig(res)
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
@ -298,6 +315,10 @@ onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -46,6 +46,7 @@ watch(
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
|
||||
// 初始运行的方法
|
||||
const handleGoMounted = async () => {
|
||||
const res: any = await handleGetData()
|
||||
@ -58,6 +59,15 @@ const handleGoMounted = async () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -169,11 +179,7 @@ const handleGoMounted = async () => {
|
||||
},
|
||||
color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
return option
|
||||
}
|
||||
|
||||
// 拿到数据的方法
|
||||
@ -283,7 +289,21 @@ onBeforeUnmount(() => {
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleUpdatePie = async () => {
|
||||
if (myChart) {
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
}
|
||||
|
||||
const res: any = await handleGetData()
|
||||
const option = handleSetConfig(res)
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -58,6 +58,21 @@ const handleGoMounted = async () => {
|
||||
myChart2 = echarts.init(chartDom2);
|
||||
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
const option2 = handleSetConfig2(res)
|
||||
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart2.setOption(option2);
|
||||
|
||||
myChart.resize();
|
||||
myChart2.resize();
|
||||
|
||||
window.addEventListener('resize', resizeChart);
|
||||
window.addEventListener('resize', resizeChart2);
|
||||
}
|
||||
|
||||
const handleSetConfig = (res: any) => {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
@ -204,8 +219,10 @@ const handleGoMounted = async () => {
|
||||
],
|
||||
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
|
||||
};
|
||||
return option
|
||||
}
|
||||
|
||||
|
||||
const handleSetConfig2 = (res: any) => {
|
||||
const option2 = {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
@ -318,15 +335,7 @@ const handleGoMounted = async () => {
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart2.setOption(option2);
|
||||
|
||||
myChart.resize();
|
||||
myChart2.resize();
|
||||
|
||||
window.addEventListener('resize', resizeChart);
|
||||
window.addEventListener('resize', resizeChart2);
|
||||
return option2
|
||||
}
|
||||
|
||||
// 拿到入区车辆的趋势
|
||||
@ -485,7 +494,6 @@ const handleGetSectionFlowCount = async () => {
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
@ -498,6 +506,28 @@ onBeforeUnmount(() => {
|
||||
myChart2?.dispose();
|
||||
});
|
||||
|
||||
// 更新图表数据
|
||||
const handleUpdatePie = async () => {
|
||||
const res: any = await handleGetSectionFlowCount()
|
||||
|
||||
myChart.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
myChart2.setOption({
|
||||
series: [], // 清空 series
|
||||
}, { replaceMerge: 'series' }); // 替换 series 部分
|
||||
|
||||
const option = handleSetConfig(res)
|
||||
const option2 = handleSetConfig2(res)
|
||||
|
||||
myChart.setOption(option)
|
||||
myChart2.setOption(option2)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleUpdatePie
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -72,6 +72,9 @@ const handleGetData = async () => {
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
handleGetData
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -86,7 +89,7 @@ const handleGetData = async () => {
|
||||
<div class="supplierMessageBoxTopItem">
|
||||
<div class="supplierMessageBoxTopItemLabel">品牌方/家</div>
|
||||
<div class="supplierMessageBoxTopItemvalue" style="color: #ef5a0d;">{{ supplierObj?.brandSide || "0"
|
||||
}}
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,6 +65,7 @@ import MemberMall from './components/MemberMall/index.vue'
|
||||
import AnalysisOfMember from './components/AnalysisOfMember/AnalysisOfMember.vue'
|
||||
import AreaLegend from './components/AreaLegend/AreaLegend.vue';
|
||||
import { useRouter } from 'vue-router'; // 新增
|
||||
import moment from 'moment';
|
||||
|
||||
|
||||
|
||||
@ -112,15 +113,281 @@ let mapClickComeForm = ref<string>("")
|
||||
// 当前招商信息的枚举
|
||||
let noticeMessageObj = ref<any>()
|
||||
|
||||
// 创建组件实例
|
||||
// 服务区概况
|
||||
const OverviewOfServiceAreaRef = ref<any>()
|
||||
// 交易预警
|
||||
const TradingAlertRef = ref<any>()
|
||||
// 核心经营数据
|
||||
const CoreBusinessDataRef = ref<any>()
|
||||
// 断面流量趋势
|
||||
const TrendOfTrafficFlowRef = ref<any>()
|
||||
// 入区车流趋势
|
||||
const VehiclesEnteringRef = ref<any>()
|
||||
// 经营效益趋势
|
||||
const VehicleModelStayRef = ref<any>()
|
||||
// 年龄
|
||||
const CustomerAgeGroupRef = ref<any>()
|
||||
// 性别
|
||||
const GenderCustomerGroupRef = ref<any>()
|
||||
// 偏好类型
|
||||
const PreferenceTypeRef = ref<any>()
|
||||
// 客群特征分析
|
||||
const CustomerGroupRef = ref<any>()
|
||||
// 客群消费偏好
|
||||
const CustomerConsumptionPreferencesRef = ref<any>()
|
||||
// 消费转化率对比图
|
||||
const ConsumptionConversionRef = ref<any>()
|
||||
// 消费水平
|
||||
const ConsumptionLevelRef = ref<any>()
|
||||
// 消费时段分析
|
||||
const ConsumptionPeriodRef = ref<any>()
|
||||
// 品牌消费水平
|
||||
const BrandConsumptionLevelRef = ref<any>()
|
||||
// 营收特征
|
||||
const BusinessCaseRef = ref<any>()
|
||||
// 区域营收占比
|
||||
const RegionalRevenueRef = ref<any>()
|
||||
// 业态结构占比
|
||||
const BusinessStructureRef = ref<any>()
|
||||
// 节假日营收
|
||||
const FestivalRevenueSumInfoRef = ref<any>()
|
||||
// 热门商品榜单
|
||||
const HotProductListRef = ref<any>()
|
||||
// 商户类别比例图 和 下面的列表
|
||||
const BrandDetailRef = ref<any>()
|
||||
// 供应商
|
||||
const SupplierListBoxRef = ref<any>()
|
||||
// 商城订单统计
|
||||
const MallOrderStatisticsRef = ref<any>()
|
||||
// 本月福利金发送额度
|
||||
const ThisMonthBenefitsRef = ref<any>()
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
let currentUser: any = sessionStorage.getItem('currentUser')
|
||||
if (!currentUser) {
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// 先判断当前是否已经存在了 之前的整点数据
|
||||
let integralPoint: string = sessionStorage.getItem('integralPoint') || ""
|
||||
console.log('integralPointintegralPoint', integralPoint);
|
||||
// 如果有 就拿当前时间取对比
|
||||
if (integralPoint) {
|
||||
// 如果缓存里面的时间 跟当前的整点时间一样 那就触发 定时器方法
|
||||
let nowTime: string = moment().format('YYYY-MM-DD HH')
|
||||
let time: string = nowTime + ':00:00'
|
||||
// timerMethod()
|
||||
if (time === integralPoint) {
|
||||
// 调用定时器方法
|
||||
timerMethod()
|
||||
} else {
|
||||
handleGetUpdateAllData()
|
||||
}
|
||||
} else {
|
||||
// 如果没有整点缓存 那就拿到当前最近的整点数据
|
||||
let nowTime: string = moment().format('YYYY-MM-DD HH')
|
||||
let time: string = nowTime + ':00:00'
|
||||
sessionStorage.setItem('integralPoint', time)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 定时器方法
|
||||
const timerMethod = () => {
|
||||
// 距离整点 不同时间的调用平路的设置
|
||||
let checkInterval = 60 * 1000; // 默认1分钟检查一次
|
||||
const now = new Date();
|
||||
const secondsToNextHour = (60 - now.getMinutes()) * 60 - now.getSeconds();
|
||||
|
||||
// 关键优化：动态调整检查频率
|
||||
if (secondsToNextHour <= 300) { // 距离整点5分钟时
|
||||
checkInterval = 1000; // 切换到1秒检查
|
||||
} else if (secondsToNextHour <= 1800) { // 距离整点30分钟时
|
||||
checkInterval = 30 * 1000; // 30秒检查
|
||||
} else {
|
||||
checkInterval = 60 * 1000; // 否则1分钟检查
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
// handleGetUpdateAllData()
|
||||
if (new Date().getMinutes() === 0) {
|
||||
handleGetUpdateAllData()
|
||||
}
|
||||
timerMethod(); // 递归调用
|
||||
}, checkInterval);
|
||||
}
|
||||
|
||||
// 更新全部图表的缓存数据的方法
|
||||
const handleGetUpdateAllData = () => {
|
||||
// 清除原本的缓存数据
|
||||
handleClearCacheData()
|
||||
|
||||
// 服务区概况
|
||||
OverviewOfServiceAreaRef.value.handleGetData()
|
||||
// 交易预警
|
||||
TradingAlertRef.value.handleGetData()
|
||||
// 核心经营数据
|
||||
CoreBusinessDataRef.value.handleGetMapRealData()
|
||||
// 断面流量趋势
|
||||
TrendOfTrafficFlowRef.value.handleUpdatePie()
|
||||
// 入区车流趋势
|
||||
VehiclesEnteringRef.value.handleUpdatePie()
|
||||
// 经营效益
|
||||
VehicleModelStayRef.value.handleUpdatePie()
|
||||
if (CustomerAgeGroupRef.value) {
|
||||
// 年龄
|
||||
CustomerAgeGroupRef.value.handleUpdatePie()
|
||||
}
|
||||
if (GenderCustomerGroupRef.value) {
|
||||
// 性别
|
||||
GenderCustomerGroupRef.value.handleUpdatePie()
|
||||
}
|
||||
if (PreferenceTypeRef.value) {
|
||||
// 偏好类型
|
||||
PreferenceTypeRef.value.handleUpdatePie()
|
||||
}
|
||||
if (CustomerGroupRef.value) {
|
||||
// 客群特征分析
|
||||
CustomerGroupRef.value.handleUpdatePie()
|
||||
}
|
||||
if (CustomerConsumptionPreferencesRef.value) {
|
||||
// 客群消费偏好
|
||||
CustomerConsumptionPreferencesRef.value.handleUpdatePie()
|
||||
}
|
||||
if (ConsumptionConversionRef.value) {
|
||||
// 消费转化率对比图
|
||||
ConsumptionConversionRef.value.handleUpdatePie()
|
||||
}
|
||||
if (ConsumptionConversionRef.value) {
|
||||
// 消费水平
|
||||
ConsumptionConversionRef.value.handleUpdatePie()
|
||||
}
|
||||
if (ConsumptionPeriodRef.value) {
|
||||
// 消费时段分析
|
||||
ConsumptionPeriodRef.value.handleUpdatePie()
|
||||
}
|
||||
if (BrandConsumptionLevelRef.value) {
|
||||
// 品牌消费水平
|
||||
BrandConsumptionLevelRef.value.handleUpdatePie()
|
||||
}
|
||||
if (BusinessCaseRef.value) {
|
||||
// 营收特征
|
||||
BusinessCaseRef.value.handleUpdatePie()
|
||||
}
|
||||
if (RegionalRevenueRef.value) {
|
||||
// 区域营收占比
|
||||
RegionalRevenueRef.value.handleUpdatePie()
|
||||
}
|
||||
if (BusinessStructureRef.value) {
|
||||
// 业态结构占比
|
||||
BusinessStructureRef.value.handleUpdatePie()
|
||||
}
|
||||
if (FestivalRevenueSumInfoRef.value) {
|
||||
// 节假日营收
|
||||
FestivalRevenueSumInfoRef.value.handleUpdatePie()
|
||||
}
|
||||
if (HotProductListRef.value) {
|
||||
// 热门商品榜单
|
||||
HotProductListRef.value.handleUpdatePie()
|
||||
}
|
||||
if (BrandDetailRef.value) {
|
||||
// 商户类别比例图 和 下面的列表
|
||||
BrandDetailRef.value.handleUpdatePie()
|
||||
}
|
||||
if (SupplierListBoxRef.value) {
|
||||
// 供应商
|
||||
SupplierListBoxRef.value.handleGetData()
|
||||
}
|
||||
if (MallOrderStatisticsRef.value) {
|
||||
// 商城订单统计
|
||||
MallOrderStatisticsRef.value.handleGetData()
|
||||
}
|
||||
if (ThisMonthBenefitsRef.value) {
|
||||
// 本月福利金额
|
||||
ThisMonthBenefitsRef.value.handleGetData()
|
||||
}
|
||||
}
|
||||
|
||||
// 清空原先的缓存数据
|
||||
const handleClearCacheData = () => {
|
||||
// 清除服务区概况的设备信息的缓存
|
||||
sessionStorage.setItem("OverviewOfServiceArea", '')
|
||||
sessionStorage.setItem('OverviewOfServiceAreaAI', '')
|
||||
// 清除服务区承载的缓存
|
||||
sessionStorage.setItem("OverviewOfServiceAreaBusiness", '')
|
||||
sessionStorage.setItem("OverviewOfServiceAreaBusinessAI", '')
|
||||
// 清除交易预警的缓存
|
||||
sessionStorage.setItem("TradingAlert", '')
|
||||
sessionStorage.setItem("TradingAlertAI", '')
|
||||
// 清除实时数据的缓存
|
||||
sessionStorage.setItem("CoreBusinessData", '')
|
||||
sessionStorage.setItem("CoreBusinessDataAI", '')
|
||||
sessionStorage.setItem("CoreBusinessDataMonth", '')
|
||||
sessionStorage.setItem("CoreBusinessDataMonthAI", '')
|
||||
// 断面流量趋势
|
||||
sessionStorage.setItem("TrendOfTrafficFlow", '')
|
||||
sessionStorage.setItem("TrendOfTrafficFlowYes", '')
|
||||
sessionStorage.setItem("TrendOfTrafficFlowYesAI", '')
|
||||
sessionStorage.setItem("TrendOfTrafficFlowYesAI", '')
|
||||
// 经营效益趋势
|
||||
sessionStorage.setItem("VehicleModelStay", '')
|
||||
sessionStorage.setItem("VehicleModelStayAI", '')
|
||||
// 年龄
|
||||
sessionStorage.setItem("CustomerAgeGroup", '')
|
||||
sessionStorage.setItem("CustomerAgeGroupAI", '')
|
||||
// 性别
|
||||
sessionStorage.setItem("GenderCustomerGroup", '')
|
||||
sessionStorage.setItem("GenderCustomerGroupAI", '')
|
||||
// 偏好类型
|
||||
sessionStorage.setItem("PreferenceType", '')
|
||||
sessionStorage.setItem("PreferenceTypeAI", '')
|
||||
// 客群特征分析
|
||||
sessionStorage.setItem("CustomerGroup", '')
|
||||
sessionStorage.setItem("CustomerGroupAI", '')
|
||||
// 客群消费偏好
|
||||
sessionStorage.setItem("CustomerConsumptionPreferences", '')
|
||||
sessionStorage.setItem("CustomerConsumptionPreferencesAI", '')
|
||||
// 消费转化率对比图
|
||||
sessionStorage.setItem("ConsumptionConversion", '')
|
||||
sessionStorage.setItem("ConsumptionConversionAI", '')
|
||||
// 消费水平
|
||||
sessionStorage.setItem("ConsumptionLevel", '')
|
||||
sessionStorage.setItem("ConsumptionLevelAI", '')
|
||||
// 消费时段分析
|
||||
sessionStorage.setItem("ConsumptionPeriod", '')
|
||||
sessionStorage.setItem("ConsumptionPeriodAI", '')
|
||||
// 品牌消费水平
|
||||
sessionStorage.setItem("BrandConsumptionLevel", '')
|
||||
sessionStorage.setItem("BrandConsumptionLevelAI", '')
|
||||
// 营收特征
|
||||
sessionStorage.setItem("BusinessCase", '')
|
||||
sessionStorage.setItem("BusinessCaseAI", '')
|
||||
// 区域营收占比
|
||||
sessionStorage.setItem("RegionalRevenue", '')
|
||||
sessionStorage.setItem("RegionalRevenueAI", '')
|
||||
// 业态结构占比
|
||||
sessionStorage.setItem("BusinessStructure", '')
|
||||
sessionStorage.setItem("BusinessStructureAI", '')
|
||||
// 节假日营收
|
||||
sessionStorage.setItem("FestivalRevenueSumInfo", '')
|
||||
sessionStorage.setItem("FestivalRevenueSumInfoAI", '')
|
||||
// 热门商品榜单
|
||||
sessionStorage.setItem("HotProductList", '')
|
||||
// 商户类别比例图 和 下面的列表
|
||||
sessionStorage.setItem("BrandDetail", '')
|
||||
sessionStorage.setItem("BrandTab", '')
|
||||
sessionStorage.setItem("BrandTabList", '')
|
||||
// 供应商
|
||||
sessionStorage.setItem("supplierListBox", '')
|
||||
sessionStorage.setItem("supplierListBox2", '')
|
||||
// 商城订单统计
|
||||
sessionStorage.setItem("MallOrderStatistics", '')
|
||||
// 本月福利金额
|
||||
sessionStorage.setItem("ThisMonthBenefits", '')
|
||||
}
|
||||
|
||||
// 改变页面样式
|
||||
const handleChangePageType = () => {
|
||||
if (pageType.value === 'center') {
|
||||
@ -223,7 +490,7 @@ const handleStopPrint = () => {
|
||||
<div v-show="selectPageTab === 1">
|
||||
<div class="content169LeftContent">
|
||||
<!-- 服务区概况 -->
|
||||
<OverviewOfServiceArea />
|
||||
<OverviewOfServiceArea ref="OverviewOfServiceAreaRef" />
|
||||
|
||||
<NewBigTitleBox :title="'特情事件'" style="margin-top: 15px;" />
|
||||
|
||||
@ -234,7 +501,7 @@ const handleStopPrint = () => {
|
||||
<!-- <BusyTradingRanking style="margin-top: 11px;" /> -->
|
||||
|
||||
<!-- 交易预警 -->
|
||||
<TradingAlert />
|
||||
<TradingAlert ref="TradingAlertRef" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -258,7 +525,8 @@ const handleStopPrint = () => {
|
||||
|
||||
<div class="content169Center">
|
||||
<!-- 核心经营数据 -->
|
||||
<CoreBusinessData :currentService="currentService" style="position: relative;z-index: 9;" />
|
||||
<CoreBusinessData ref="CoreBusinessDataRef" :currentService="currentService"
|
||||
style="position: relative;z-index: 9;" />
|
||||
|
||||
<div v-show="selectPageTab === 1 && !showDialogBox">
|
||||
<!-- 地图 -->
|
||||
@ -324,12 +592,12 @@ const handleStopPrint = () => {
|
||||
<div class="content169LeftContent" style="margin-top: 21px;">
|
||||
<div class="leftContentBoxItem">
|
||||
<!-- 断面流量趋势 -->
|
||||
<TrendOfTrafficFlow :currentService="currentService" />
|
||||
<TrendOfTrafficFlow ref="TrendOfTrafficFlowRef" :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 23px;">
|
||||
<!-- 入区车流趋势 -->
|
||||
<VehiclesEntering :currentService="currentService" />
|
||||
<VehiclesEntering ref="VehiclesEnteringRef" :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<!-- <div class="leftContentBoxItem" style="margin-top: 30px;"> -->
|
||||
@ -340,7 +608,7 @@ const handleStopPrint = () => {
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 33px;">
|
||||
<!-- 经营效益趋势 -->
|
||||
<VehicleModelStay />
|
||||
<VehicleModelStay ref="VehicleModelStayRef" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -383,28 +651,32 @@ const handleStopPrint = () => {
|
||||
|
||||
<div class="leftBottomContent">
|
||||
<!-- 年龄 -->
|
||||
<CustomerAgeGroup style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
|
||||
<CustomerAgeGroup ref="CustomerAgeGroupRef"
|
||||
style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
|
||||
|
||||
<!-- 性别 -->
|
||||
<GenderCustomerGroup style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
|
||||
<GenderCustomerGroup ref="GenderCustomerGroupRef"
|
||||
style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
|
||||
|
||||
<!-- 停留时长 -->
|
||||
<!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
|
||||
|
||||
<!-- 偏好类型 -->
|
||||
<PreferenceType style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
|
||||
<PreferenceType ref="PreferenceTypeRef"
|
||||
style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottom" style="margin-top: 0;display: flex;flex-wrap: wrap;">
|
||||
|
||||
<div class="left3stBottomItem" style="width: calc((100% - 57px) / 3);">
|
||||
<!-- 客群特征分析 -->
|
||||
<CustomerGroup style="margin-top: 15px;" />
|
||||
<CustomerGroup ref="CustomerGroupRef" style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem" style="width: calc((100% - 57px) / 3 * 2);margin-left: 23px;">
|
||||
<!-- 客群消费偏好 -->
|
||||
<CustomerConsumptionPreferences style="margin-top: 15px;" />
|
||||
<CustomerConsumptionPreferences ref="CustomerConsumptionPreferencesRef"
|
||||
style="margin-top: 15px;" />
|
||||
</div>
|
||||
<!-- <div class="left3stBottomItem">
|
||||
|
||||
@ -428,27 +700,28 @@ const handleStopPrint = () => {
|
||||
<div class="left3stBottomItemLeft">
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费转化率对比图 -->
|
||||
<ConsumptionConversion style="margin-top: 15px;" />
|
||||
<ConsumptionConversion ref="ConsumptionConversionRef" style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费水平 -->
|
||||
<ConsumptionLevel style="margin-top: 15px;" />
|
||||
<ConsumptionLevel ref="ConsumptionLevelRef" style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费时段分析 -->
|
||||
<ConsumptionPeriod style="margin-top: 15px;" />
|
||||
<ConsumptionPeriod ref="ConsumptionPeriodRef" style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 品牌消费水平 -->
|
||||
<BrandConsumptionLevel style="margin-top: 15px;" />
|
||||
<BrandConsumptionLevel ref="BrandConsumptionLevelRef" style="margin-top: 15px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItemRight">
|
||||
<BusinessCase :currentService="currentService" :selectTab="selectTab" />
|
||||
<!-- 营收特征 -->
|
||||
<BusinessCase ref="BusinessCaseRef" :currentService="currentService" :selectTab="selectTab" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -480,14 +753,15 @@ const handleStopPrint = () => {
|
||||
<NewBigTitleBox :title="'经营业态'" style="margin-top: 20px;" />
|
||||
<div class="rightContentBox">
|
||||
<!-- 区域营收占比 -->
|
||||
<RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
|
||||
<RegionalRevenue ref="RegionalRevenueRef" :currentService="currentService"
|
||||
style="margin-top: 10px;" />
|
||||
|
||||
<!-- 多业态收入 -->
|
||||
<!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
|
||||
|
||||
<!-- 业态结构占比 -->
|
||||
<!-- style="margin-top: 22px;" -->
|
||||
<BusinessStructure :currentService="currentService" />
|
||||
<BusinessStructure ref="BusinessStructureRef" :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<NewBigTitleBox :title="'节假日营收'">
|
||||
@ -503,7 +777,8 @@ const handleStopPrint = () => {
|
||||
</NewBigTitleBox>
|
||||
<!-- 节假日营收 -->
|
||||
<!-- <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" /> -->
|
||||
<FestivalRevenueSumInfo :currentService="currentService" :FestivalValue="FestivalValue" />
|
||||
<FestivalRevenueSumInfo ref="FestivalRevenueSumInfoRef" :currentService="currentService"
|
||||
:FestivalValue="FestivalValue" />
|
||||
|
||||
<!-- 电商模块 -->
|
||||
<!-- <modalTitle :title="'电商模块'" style="margin-top: 20px;" /> -->
|
||||
@ -624,7 +899,7 @@ const handleStopPrint = () => {
|
||||
<!-- <AssessmentScoringRanking style="margin-top: 19px;" /> -->
|
||||
|
||||
<!-- 热门商品榜单 -->
|
||||
<HotProductList style="margin-top: 20px;" :pageType="'left'" />
|
||||
<HotProductList ref="HotProductListRef" style="margin-top: 20px;" :pageType="'left'" />
|
||||
</div>
|
||||
|
||||
<!-- 客群特征分析 -->
|
||||
@ -642,12 +917,12 @@ const handleStopPrint = () => {
|
||||
<NewBigTitleBox :title="'品牌'" style="margin-top: 54px;" />
|
||||
|
||||
<!-- 商户类别比例图 和 下面的列表 -->
|
||||
<BrandDetail />
|
||||
<BrandDetail ref="BrandDetailRef" />
|
||||
</div>
|
||||
|
||||
<div class="content1694stItem">
|
||||
<NewBigTitleBox :title="'供应商'" style="margin-top: 54px;" />
|
||||
<SupplierListBox />
|
||||
<SupplierListBox ref="SupplierListBoxRef" />
|
||||
<!-- 在线服务区和在线收银机 -->
|
||||
<!-- <TodayTrend /> -->
|
||||
|
||||
@ -664,12 +939,12 @@ const handleStopPrint = () => {
|
||||
<NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
|
||||
|
||||
<!-- 商城订单统计 -->
|
||||
<MallOrderStatistics style="margin-top: 20px;" />
|
||||
<MallOrderStatistics ref="MallOrderStatisticsRef" style="margin-top: 20px;" />
|
||||
|
||||
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
|
||||
|
||||
<!-- 本月福利金发送额度 -->
|
||||
<ThisMonthBenefits style="margin-top: 10px;" />
|
||||
<ThisMonthBenefits ref="ThisMonthBenefitsRef" style="margin-top: 10px;" />
|
||||
|
||||
<!-- 核心品类占比 -->
|
||||
<!-- <CoreCategory style="margin-top: 10px;" /> -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user