diff --git a/src/page/index/components/AccountsReceivableWarning/AccountsReceivableWarning.vue b/src/page/index/components/AccountsReceivableWarning/AccountsReceivableWarning.vue index a030c12..6128deb 100644 --- a/src/page/index/components/AccountsReceivableWarning/AccountsReceivableWarning.vue +++ b/src/page/index/components/AccountsReceivableWarning/AccountsReceivableWarning.vue @@ -37,6 +37,8 @@ const tabList = [ // 选择的tab let selectTab = ref(1) // 应收账款预警 +let AccountsReceivableWarning2 = ref() +// 合同到期预警 let AccountsReceivableWarning = ref() // 图例列表 let legendList = ref([]) @@ -50,7 +52,7 @@ onMounted(async () => { // 获取数据 const handleGetData = async () => { let category: string[] = [] - let seriesData: number[] = [] + let seriesData: any = [] let realData: string[] = [] const req: any = { @@ -63,14 +65,15 @@ const handleGetData = async () => { // 应收账款预警 let ArrearageList = data.ArrearageList - - AccountsReceivableWarning.value = data + data.Arrearage_Amount = Number(data.Arrearage_Amount.toFixed(2)).toLocaleString() + AccountsReceivableWarning2.value = data if (ArrearageList && ArrearageList.length > 0) { ArrearageList.forEach((item: any) => { category.push(item.Overdue_Situation) - seriesData.push(item.Arrearage_Amount) + // seriesData.push(item.ArrearageContract_Count) + seriesData.push({ name: item.Overdue_Situation, value: item.ArrearageContract_Count }) }) } @@ -111,7 +114,7 @@ const handleHaveFirstPie = async () => { }, formatter: function (params: any) { return ` -
${params.name} ${params.value}%
+
${params.name} ${params.value}份
`; } }, @@ -259,16 +262,18 @@ const handleHaveSecond = async () => { myChart2.setOption(option); myChart2.resize(); - window.addEventListener('resize', resizeChart); + window.addEventListener('resize', resizeChart2); } const resizeChart = () => { myChart?.resize(); +}; +const resizeChart2 = () => { myChart2?.resize(); }; - onBeforeUnmount(() => { window.removeEventListener('resize', resizeChart); + window.removeEventListener('resize', resizeChart2); myChart?.dispose(); myChart2?.dispose(); }); @@ -298,7 +303,7 @@ onBeforeUnmount(() => {
应收欠款(全部)
{{ - AccountsReceivableWarning?.Arrearage_Amount || '-' }} + AccountsReceivableWarning2?.Arrearage_Amount || '-' }} 万元
@@ -306,7 +311,7 @@ onBeforeUnmount(() => {
欠款合同
{{ - AccountsReceivableWarning?.ArrearageContract_Count || '-' }} + AccountsReceivableWarning2?.ArrearageContract_Count || '-' }} 份
diff --git a/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue b/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue index 17a12b0..44bc570 100644 --- a/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue +++ b/src/page/index/components/AssessmentScoringRanking/AssessmentScoringRanking.vue @@ -6,7 +6,7 @@ import { handleGetExamineResultList } from '../../service'; // 考核数据 -let rankList: any = ref([{}, {}, {}, {}, {}]) +let rankList: any = ref([]) onMounted(async () => { await handleGetData() @@ -19,7 +19,7 @@ const handleGetData = async () => { DataType: 1, StartMonth: "202501", EndMonth: "202501", - provinceCode: "340000", + provinceCode: "530000", } const data = await handleGetExamineResultList(req) diff --git a/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue b/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue index 8e491dd..36d7efc 100644 --- a/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue +++ b/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue @@ -36,10 +36,10 @@ onMounted(async () => { const option = { legend: { - selectedMode: false, + // selectedMode: false, right: 0, textStyle: { - color: '#666', + color: '#fff', fontSize: 12, padding: [0, 0, 0, 5] }, diff --git a/src/page/index/components/BrandDetail/BrandDetail.vue b/src/page/index/components/BrandDetail/BrandDetail.vue index 7468ac6..60963a0 100644 --- a/src/page/index/components/BrandDetail/BrandDetail.vue +++ b/src/page/index/components/BrandDetail/BrandDetail.vue @@ -72,11 +72,10 @@ const handleGoMounted = async () => { itemWidth: 12, // 图例标记宽度 itemHeight: 12, // 图例标记高度 textStyle: { - color: '#666', // 文字颜色 + color: '#fff', // 文字颜色 rich: { // 可以在这里添加富文本样式 value: { - color: '#333', fontWeight: 'bold', padding: [0, 0, 0, 5] // 文字间距 } diff --git a/src/page/index/components/BusinessCase/BusinessCase.less b/src/page/index/components/BusinessCase/BusinessCase.less index 9fe626f..64577f6 100644 --- a/src/page/index/components/BusinessCase/BusinessCase.less +++ b/src/page/index/components/BusinessCase/BusinessCase.less @@ -67,11 +67,13 @@ .BusinessCaseRightItem { flex: 1; - display: flex; - align-items: flex-end; - justify-content: space-between; - .rightItemLeft { + .BusinessCaseRightItemTop { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + .rightItemTitle { font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; @@ -82,10 +84,26 @@ margin-top: 5px; } - .rightItemBottom { - margin-top: 8px; + .rightItemUpdate { + font-family: Inter, Inter; + font-weight: 400; + font-size: 12px; + color: #78828E; + text-align: left; + font-style: normal; + } + } + + .BusinessCaseRightItemBottom { + width: 100%; + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-top: 8px; + + .BusinessCaseItemBottomLeft { display: flex; - align-items: center; + align-items: flex-end; .compareTitle { font-family: Inter, Inter; @@ -98,50 +116,142 @@ .changeBox { margin-left: 5px; - + display: flex; + align-items: center; .changeIcon { width: 6px; height: 8px; margin-right: 2px; + display: block; } .changeText { font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; - font-size: 10px; + font-size: 12px; color: #00FF00; text-align: left; font-style: normal; } } } - } + .BusinessCaseItemBottomRight { + display: flex; + align-items: flex-end; - .rightItemRight { - display: flex; - align-items: center; + .BusinessCaseRevenueValue { + font-family: Impact, Impact; + font-weight: 400; + font-size: 25px; + color: #FFFFFF; + letter-spacing: 2px; + text-align: right; + font-style: normal; + } - .BusinessCaseRevenueValue { - font-family: Impact, Impact; - font-weight: 400; - font-size: 25px; - color: #FFFFFF; - letter-spacing: 2px; - text-align: right; - font-style: normal; - } - - .BusinessCaseRevenueUnit { - font-family: Inter, Inter; - font-weight: 400; - font-size: 12px; - color: #788390; - text-align: right; - font-style: normal; - margin-left: 10px; + .BusinessCaseRevenueUnit { + font-family: Inter, Inter; + font-weight: 400; + font-size: 12px; + color: #788390; + text-align: right; + font-style: normal; + margin-left: 10px; + } } } + + + + // .rightItemLeft { + // .rightItemTitleBox { + // width: 100%; + // display: flex; + // align-items: center; + // justify-content: space-between; + + // .rightItemTitle { + // font-family: Microsoft YaHei, Microsoft YaHei; + // font-weight: 400; + // font-size: 14px; + // color: #FFFFFF; + // text-align: left; + // font-style: normal; + // margin-top: 5px; + // } + + // .rightItemUpdate { + // font-family: Inter, Inter; + // font-weight: 400; + // font-size: 12px; + // color: #FFFFFF; + // text-align: left; + // font-style: normal; + // } + // } + + + // .rightItemBottom { + // margin-top: 8px; + // display: flex; + // align-items: center; + + // .compareTitle { + // font-family: Inter, Inter; + // font-weight: 400; + // font-size: 12px; + // color: #78828E; + // text-align: left; + // font-style: normal; + // } + + // .changeBox { + // margin-left: 5px; + + // .changeIcon { + // width: 6px; + // height: 8px; + // margin-right: 2px; + // } + + // .changeText { + // font-family: Microsoft YaHei, Microsoft YaHei; + // font-weight: 400; + // font-size: 10px; + // color: #00FF00; + // text-align: left; + // font-style: normal; + // } + // } + // } + // } + + + // .rightItemRight { + // display: flex; + // align-items: center; + + // .BusinessCaseRevenueValue { + // font-family: Impact, Impact; + // font-weight: 400; + // font-size: 25px; + // color: #FFFFFF; + // letter-spacing: 2px; + // text-align: right; + // font-style: normal; + // } + + // .BusinessCaseRevenueUnit { + // font-family: Inter, Inter; + // font-weight: 400; + // font-size: 12px; + // color: #788390; + // text-align: right; + // font-style: normal; + // margin-left: 10px; + // } + // } } } diff --git a/src/page/index/components/BusinessCase/BusinessCase.vue b/src/page/index/components/BusinessCase/BusinessCase.vue index 8e0c49d..27b9dc2 100644 --- a/src/page/index/components/BusinessCase/BusinessCase.vue +++ b/src/page/index/components/BusinessCase/BusinessCase.vue @@ -16,6 +16,8 @@ import { TransformComponent // 如果使用 dataset.source 需要此组件 } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; +import addIcon from '../../../../assets/image/addIcon.png' +import reduce from '../../../../assets/image/reduce.png' @@ -47,6 +49,8 @@ let selectTab = ref(1) // 当前请求来的实际数据 let realData = ref() +// 请求到的整个数据 +let getAllData = ref() // 传入的数据 const props = defineProps<{ @@ -78,7 +82,6 @@ const handleChangeTab = async (value: number) => { // 拿到数据的方法 const handleGetData = async () => { - const req: any = { ProvinceCode: "340000", StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'), @@ -88,6 +91,8 @@ const handleGetData = async () => { const data = await handleCodeGetRevenueCompare(req) console.log('djsakjdaskldjasoifioad', data); + getAllData.value = data + // 营收金额 let category: any = ['product'] let monthList: number[] = [] @@ -110,7 +115,7 @@ const handleGetData = async () => { let list: any = [`${item}月`] data.RevenueAmountList.forEach((subItem: any) => { let newData: any = subItem.data - list.push(newData[item - 1][1]) + list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2))) }) res.push(list) }) @@ -123,7 +128,7 @@ const handleGetData = async () => { let list: any = [`${item}月`] data.TicketCountList.forEach((subItem: any) => { let newData: any = subItem.data - list.push(newData[item - 1][1]) + list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2))) }) res2.push(list) }) @@ -180,13 +185,13 @@ const handleGetBottomData = async () => { if (data && data.length > 0) { data.forEach((item: any) => { - currentYear.push(item.value) + currentYear.push(Number((Number(item.value) / 10000).toFixed(2))) }) } if (yesData && yesData.length > 0) { yesData.forEach((item: any) => { - lastYear.push(item.value) + lastYear.push(Number((Number(item.value) / 10000).toFixed(2))) }) } @@ -202,6 +207,9 @@ const handleGetBottomData = async () => { const handleShowData = async (value: number) => { let data = realData.value[value] + console.log('fjidufasdhfsdjfsdn', data); + + const chartDom = document.getElementById('featureAnalysis'); if (!chartDom) return; @@ -221,16 +229,36 @@ const handleShowData = async (value: number) => { type: 'category', axisLabel: { interval: 0, + color: '#fff', + formatter: '{value}' // 刻度值保持纯数字 + }, + axisLine: { + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } }, axisTick: { show: false // 隐藏刻度小线条 } }, yAxis: { - splitLine: { show: false }, + name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`, + splitLine: { show: false }, // 隐藏网格线 + axisLine: { + show: true, // 显示Y轴线 + lineStyle: { + color: '#fff' // 轴线颜色 + } + }, + axisTick: { + show: false // 隐藏刻度线（短横线） + }, axisLabel: { - width: 40, - overflow: 'truncate', + color: '#fff' + }, + nameTextStyle: { + color: '#fff', // 名称颜色 + padding: [0, 0, 0, 20] // 名称位置调整 } }, series: [{ @@ -288,26 +316,42 @@ const handleShowBottomData = async (res: any) => { boundaryGap: true, axisLabel: { interval: 0, + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } + }, + axisLine: { + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } }, axisTick: { show: false // 隐藏刻度小线条 } }, yAxis: { + name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`, type: 'value', - name: '万元', splitLine: { show: false }, axisLine: { show: true, + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } }, axisLabel: { + color: '#fff', + }, + nameTextStyle: { + color: '#fff', // 名称颜色 + padding: [0, 0, 0, 20] // 名称位置调整 } }, grid: { left: '10', // 增加左侧空间 right: '10', // 增加右侧空间 bottom: '0', - top: '10', + top: '30', containLabel: true }, series: [ @@ -342,10 +386,9 @@ const handleShowBottomData = async (res: any) => { type: 'line' // 改为线条指示器 }, formatter: function (params: any) { - console.log('paramsparamsparams', params); return `${params.map((item: any) => { return `
- ${item.seriesName}：${item.value}元 + ${item.seriesName}：${item.value}万元
` }).join("")}` } @@ -398,22 +441,60 @@ onBeforeUnmount(() => {
-
+
营收同比
+
{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}
+
+
+
+
相比去年同日
+
+ +
{{ + selectTab === 1 ? getAllData?.RevenueAmountYOYRate : + selectTab === 2 ? getAllData?.TicketCountYOYRate : + selectTab === 3 ? getAllData?.AvgTicketAmountRate : '' + }}%
+
+
+ +
+
{{ selectTab === 1 ? + getAllData?.RevenueAmount.toLocaleString() : + selectTab + === 2 ? + getAllData?.TicketCount.toLocaleString() : selectTab === 3 ? + getAllData?.AvgTicketAmount.toLocaleString() : '' + }}
+
{{ selectTab===2?'笔':'元' }}
+
+
+ +
- + --> -
-
3,329,828.91
+
diff --git a/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue b/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue index 95d8a7d..7822471 100644 --- a/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue +++ b/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue @@ -61,9 +61,10 @@ onMounted(async () => { yAxis: [ { type: 'value', - name: '车流量', + name: '车流量(辆)', nameTextStyle: { - color: '#ffffff' // Y轴名称颜色 + color: '#ffffff', // Y轴名称颜色 + padding: [0, 0, 0, 20] }, splitLine: { show: false }, axisLine: { @@ -73,15 +74,18 @@ onMounted(async () => { } }, axisLabel: { - color: '#00F6FF', + color: '#fff', formatter: '{value}' // 添加单位 - } + }, + offset: 0, // 确保Y轴紧贴图表 + splitNumber: 4, }, { type: 'value', - name: '客单量', + name: '客单量(笔)', nameTextStyle: { - color: '#ffffff' // Y轴名称颜色 + color: '#ffffff', // Y轴名称颜色 + padding: [0, 0, 0, 0] }, splitLine: { show: false }, position: 'right', @@ -94,7 +98,8 @@ onMounted(async () => { axisLabel: { color: '#ffffff', }, - offset: 0 // 确保Y轴紧贴图表 + offset: 0, // 确保Y轴紧贴图表 + splitNumber: 4, } ], grid: { @@ -148,25 +153,31 @@ onMounted(async () => { type: 'line' // 改为线条指示器 }, formatter: function (params: any) { - console.log('paramsparamsparams', params); - console.log('resresresres', res); - let toolStr: string[] = [] - if (params && params.length > 0) { - params.forEach((item: any) => { - toolStr.push( - `${item.seriesName}：${item.value}元` - ) - }) - } + console.log('paramsparamsparamsparams', params); - return ` -
-
${res.category[params[0].dataIndex]}时
- ${toolStr.map((item: string) => { - return `
${item}
` - })} -
- ` + return `
+
${params[0].name}时：
+
车流量：${params[0]?.value}辆
+
客单量：${params[1]?.value}笔
+
` + + // let toolStr: string[] = [] + // if (params && params.length > 0) { + // params.forEach((item: any) => { + // toolStr.push( + // `${item.seriesName}：${item.value}元` + // ) + // }) + // } + + // return ` + //
+ //
${res.category[params[0].dataIndex]}时
+ // ${toolStr.map((item: string) => { + // return `
${item}
` + // })} + //
+ // ` } } }; @@ -187,10 +198,13 @@ const handleGetData = async () => { const req: any = { Province_Code: '530000', + // Province_Code: '340000', Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'), Serverpart_ID: '' } const data = await handleGetTransactionConvert(req) + console.log('jfidsafuidsopfjsdflksjdfds', data); + let carList = data.BayonetList.data @@ -198,7 +212,7 @@ const handleGetData = async () => { if (carList && carList.length > 0) { carList.forEach((item: any) => { - carResList.push((item[1]).toLocaleString()) + carResList.push((item[1])) carRealResList.push(item[1]) }) } @@ -206,7 +220,7 @@ const handleGetData = async () => { if (orderList && orderList.length > 0) { orderList.forEach((item: any) => { category.push(item[0]) - orderResList.push((item[1]).toLocaleString()) + orderResList.push((item[1])) orderRealResList.push(item[1]) }) } @@ -220,6 +234,9 @@ const handleGetData = async () => { orderResList: orderResList, orderRealResList: orderRealResList } + console.log('resresresresres', res); + + return res } diff --git a/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue b/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue index c665b50..199f972 100644 --- a/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue +++ b/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue @@ -37,10 +37,9 @@ onMounted(async () => { const option = { legend: { - selectedMode: false, right: 0, textStyle: { - color: '#666', + color: '#fff', fontSize: 12, padding: [0, 0, 0, 5] }, @@ -55,14 +54,36 @@ onMounted(async () => { yAxis: { type: 'value', name: "%", - splitLine: { show: false } // 隐藏刻度线 + 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: { diff --git a/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue b/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue index ce19b40..c23f3a4 100644 --- a/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue +++ b/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue @@ -58,7 +58,8 @@ onMounted(async () => { type: 'value', name: '客单占比(%)', nameTextStyle: { - color: '#fff' // Y轴名称颜色 + color: '#fff', // Y轴名称颜色 + padding: [0, 0, 0, 20] }, splitLine: { show: false }, axisLine: { diff --git a/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue b/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue index 14522e2..e51a9d1 100644 --- a/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue +++ b/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue @@ -48,8 +48,6 @@ onMounted(async () => { // type: 'shadow' // 阴影指示器（适合柱状图） // }, formatter: function (params: any) { // 自定义提示框内容 - console.log('params', params); - return `
男性：${res.seriesDataMan[params.dataIndex]}%
女性：${res.seriesDataWoman[params.dataIndex]}%
@@ -65,6 +63,13 @@ onMounted(async () => { axisLabel: { interval: 0, // 强制显示所有标签 hideOverlap: false, // 禁止自动隐藏重叠标签 + color: '#fff', + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } }, axisTick: { alignWithLabel: true // 保证刻度线与标签对齐 @@ -76,6 +81,12 @@ onMounted(async () => { splitLine: { show: false }, axisLine: { show: true, + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } + }, + axisLabel: { + color: '#fff', }, splitNumber: 4 }, diff --git a/src/page/index/components/CustomerGroup/CustomerGroup.vue b/src/page/index/components/CustomerGroup/CustomerGroup.vue index ad72d02..9fac909 100644 --- a/src/page/index/components/CustomerGroup/CustomerGroup.vue +++ b/src/page/index/components/CustomerGroup/CustomerGroup.vue @@ -62,7 +62,7 @@ const handleShowCharts = async () => { left: '0', right: '10', bottom: '0', - top: '10', + top: '30', containLabel: true }, xAxis: { @@ -89,6 +89,7 @@ const handleShowCharts = async () => { }, yAxis: { type: 'value', + name: '交易额(元)', axisLabel: { color: '#fff', formatter: '{value}' diff --git a/src/page/index/components/FestivalRevenue/FestivalRevenue.vue b/src/page/index/components/FestivalRevenue/FestivalRevenue.vue index 1425acc..5291eb9 100644 --- a/src/page/index/components/FestivalRevenue/FestivalRevenue.vue +++ b/src/page/index/components/FestivalRevenue/FestivalRevenue.vue @@ -44,6 +44,15 @@ watch( { deep: true } ); + +// 监听传入的节日 +watch( + () => props.FestivalValue, + (newVal, oldVal) => { + handleGoMounted() + }, + { deep: true } +); // 初始运行的方法 const handleGoMounted = async () => { const res: any = await handleGetData() @@ -52,7 +61,6 @@ const handleGoMounted = async () => { if (!chartDom) return; myChart = echarts.init(chartDom); - const option = { legend: { data: ['今年', '去年'], // 对应 series 中的 name @@ -68,14 +76,31 @@ const handleGoMounted = async () => { type: 'category', data: res.category, boundaryGap: true, + axisLabel: { + color: '#fff', + formatter: '{value}' // 刻度值保持纯数字 + }, + axisLine: { + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } + }, }, yAxis: { type: 'value', name: '万元', splitLine: { show: false }, + + axisLabel: { + color: '#fff', + formatter: '{value}' // 刻度值保持纯数字 + }, axisLine: { show: true, - } + lineStyle: { + color: '#fff' // 设置 y 轴线颜色为白色（可选） + } + }, }, grid: { left: '10', // 增加左侧空间 diff --git a/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.less b/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.less index 2924fad..0abe747 100644 --- a/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.less +++ b/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.less @@ -11,7 +11,7 @@ background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; - padding: 20px 64px 18px; + padding: 20px 54px 18px; .GenderCustomerGroupUnit { font-family: "Microsoft YaHei"; @@ -29,8 +29,8 @@ height: 145px; .GenderCustomerGroup { - width: 86px; - height: 86px; + width: 106px; + height: 145px; } .legendBox { diff --git a/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue b/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue index c889de6..ceca191 100644 --- a/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue +++ b/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue @@ -62,7 +62,7 @@ onMounted(async () => { height: 43 }, left: 'center', - top: 'center', + top: '21', z: 10 } ] @@ -71,10 +71,9 @@ onMounted(async () => { { name: 'Access From', type: 'pie', - radius: ['80%', '100%'], - center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置] + radius: ['60%', '80%'], + center: ['50%', '30%'], // 关键修改：强制居中 [水平位置, 垂直位置] avoidLabelOverlap: false, - itemStyle: { color: function (params: any) { // 自定义颜色列表 @@ -91,7 +90,19 @@ onMounted(async () => { }, data: res.seriesData } - ] + ], + legend: { + data: ['男性', '女性'], + bottom: 0, + left: 0, + orient: 'horizontal', // 水平排列（默认值，可省略） + itemWidth: 12, + itemHeight: 12, + itemGap: 10, // 调整图例项之间的间距 + textStyle: { + color: '#fff' + }, + }, }; @@ -153,7 +164,7 @@ onBeforeUnmount(() => {
-
+
diff --git a/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue b/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue index f5a7304..f3bbf2f 100644 --- a/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue +++ b/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue @@ -3,7 +3,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'; import SmallTitle from '../smallTitle/smallTitle.vue' import './MallOrderStatistics.less' import * as echarts from 'echarts/core'; -import { BarChart } from 'echarts/charts'; +import { LineChart } from 'echarts/charts'; import { GridComponent, TitleComponent, @@ -12,13 +12,14 @@ import { } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; import moment from 'moment'; +import { handleGetMallOrderSummary } from '../../service'; // 季月年的选中 let selectType = ref(1) // 注册组件 echarts.use([ - BarChart, + LineChart, GridComponent, TitleComponent, TooltipComponent, @@ -39,55 +40,98 @@ onMounted(async () => { const option = { xAxis: { type: 'category', - data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"], - boundaryGap: true, + data: res.category, + axisLine: { + lineStyle: { + color: '#fff' // X轴线颜色 + } + }, axisLabel: { - interval: 3, // 每隔 2 个显示一个（0,3,6...），因为索引从 0 开始 - showMinLabel: true, // 显示第一个标签 - showMaxLabel: true // 显示最后一个标签 + color: '#fff', // X轴标签颜色 + interval: 0, + }, + + }, + yAxis: [ + { + type: 'value', + name: '交易笔数(笔)', + position: 'left', + splitLine: { show: false }, + axisLine: { + show: true, + lineStyle: { + color: '#fff' // 左侧Y轴线颜色（与第一条折线颜色一致） + } + }, + axisLabel: { + color: '#fff' // 左侧Y轴标签颜色 + }, + nameTextStyle: { + color: '#fff', // 左侧Y轴名称颜色 + padding: [0, 0, 0, 20] + } + }, + { + type: 'value', + name: '交易金额(元)', + position: 'right', + splitLine: { show: false }, + axisLine: { + show: true, + lineStyle: { + color: '#fff' // 右侧Y轴线颜色（与第二条折线颜色一致） + } + }, + axisLabel: { + color: '#fff' // 右侧Y轴标签颜色 + }, + nameTextStyle: { + color: '#fff', // 右侧Y轴名称颜色 + padding: [0, 0, 0, 0] + } } - }, - yAxis: { - type: 'value', - splitLine: { show: false } // 隐藏刻度线 - }, + ], grid: { - left: '10', // 左侧间距 - right: '10', // 右侧间距 - bottom: '0', // 底部间距 - top: '10', // 顶部间距 - containLabel: true // 确保坐标轴标签在grid内 + left: '0', // 增加左侧空间给Y轴标签 + right: '10', // 增加右侧空间给Y轴标签 + bottom: '0', + top: '50', + containLabel: true }, series: [ { - data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 180, 200, 210, 300, 200, 180, 160, 30, 80, 90, 70, 45, 35, 67, 12].map((value: any, index: any) => { - return { - value: value, - // 只在显示标签的位置显示symbol - symbol: index % 3 === 0 ? 'circle' : 'none', - symbolSize: 6 - } - }), - realData: res.realData, + name: '交易笔数', type: 'line', - color: '#FF9500' + yAxisIndex: 0, // 关联左侧Y轴 + data: res.TicketCountData, + }, + { + name: '交易金额', + type: 'line', + yAxisIndex: 1, // 关联右侧Y轴 + data: res.SellAmountData, } ], - tooltip: { // 新增 tooltip 配置 - trigger: 'axis', // 触发类型：坐标轴触发 - axisPointer: { // 坐标轴指示器配置 - type: 'shadow' // 阴影指示器（适合柱状图） - }, - formatter: function (params: any) { // 自定义提示框内容 - // params 是数组，包含当前 hover 的所有系列数据 - const data = params[0]; - let realData = res.realData[params[0].dataIndex] + tooltip: { + trigger: 'axis', + formatter: function (params: any) { return ` -
${data.name}
-
车流量：${realData + '单'}
+
${params[0].name}
+
${params[0].seriesName}: ${params[0].value}笔
+
${params[1].seriesName}: ${params[1].value}元
`; } }, + legend: { + data: ['交易笔数', '交易金额'], + top: 0, + right: 0, + textStyle: { + color: '#fff' + } + }, + color: ['#FF5E5E', '#FF9500'] }; @@ -105,14 +149,35 @@ const handleChangeType = async (value: number) => { const handleGetData = async () => { let category: string[] = [] - let seriesData: number[] = [] - let realData: 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) + + 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轴的内容 - seriesData: seriesData,// y轴的数据 - realData: realData// 真实数据 + TicketCountData: TicketCountData,// 订单笔数 + SellAmountData: SellAmountData// 交易金额 } return res } @@ -132,16 +197,14 @@ onBeforeUnmount(() => {