diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue index 87d203a..2767cf3 100644 --- a/src/components/blogs/HomePage.vue +++ b/src/components/blogs/HomePage.vue @@ -467,7 +467,6 @@ const statisticList = async () => { let formattedData = newData.map((item: any, index: number) => { return [index % 15, Math.floor(index / 15), item.writCount] }); - console.log(formattedData, "form"); formattedList(formattedData) createEcharts(heat, heatMapData); }) diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue index 793ed40..0d4d752 100644 --- a/src/views/blog/AmountChartView.vue +++ b/src/views/blog/AmountChartView.vue @@ -39,8 +39,8 @@ const lineschart = ref(null); const piechart = ref(null); const barchart = ref(null); const selectedLinePeriod: Ref = ref('nighweek'); -const selectedLinesPeriod: Ref = ref('thisyear'); const selectedPiePeriod: Ref = ref('nighweek'); +const selectedLinesPeriod: Ref = ref('thisyear'); type Period = 'nighweek' | 'nighmonth' | 'nighyear'; type Periods = 'thisyear' | 'lastyear'; @@ -59,12 +59,14 @@ const lineyear = reactive({ const thisyear = reactive({ disbursetype: [], thisyeardate: [], - lineweekdata: [] + thisyeardata: [] }) const lastyear = reactive({ - linemonthdate: [], - linemonthdata: [] + disbursetype: [], + thisyeardate: [], + thisyeardata: [] }) +const bardata=ref([]) const piedata = ref([]) const lineChartOptions = reactive>({ nighweek: { @@ -157,13 +159,13 @@ const lineChartOptions = reactive>({ const linesChartOptions = reactive>({ thisyear: { title: { - text: '近年消费统计折线图', + text: '今年消费统计折线图', }, tooltip: { trigger: 'axis' }, legend: { - data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] + data: thisyear.disbursetype }, grid: { left: '3%', @@ -179,53 +181,22 @@ const linesChartOptions = reactive>({ xAxis: { type: 'category', boundaryGap: false, - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: thisyear.thisyeardate }, yAxis: { type: 'value' }, - series: [ - { - name: 'Email', - type: 'line', - stack: 'Total', - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - name: 'Union Ads', - type: 'line', - stack: 'Total', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: 'Video Ads', - type: 'line', - stack: 'Total', - data: [150, 232, 201, 154, 190, 330, 410] - }, - { - name: 'Direct', - type: 'line', - stack: 'Total', - data: [320, 332, 301, 334, 390, 330, 320] - }, - { - name: 'Search Engine', - type: 'line', - stack: 'Total', - data: [820, 932, 901, 934, 1290, 1330, 1320] - } - ] + series: thisyear.thisyeardata }, lastyear: { title: { - text: '近年消费统计折线图', + text: '去年消费统计折线图', }, tooltip: { trigger: 'axis' }, legend: { - data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] + data: lastyear.disbursetype }, grid: { left: '3%', @@ -241,43 +212,12 @@ const linesChartOptions = reactive>({ xAxis: { type: 'category', boundaryGap: false, - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: lastyear.thisyeardate }, yAxis: { type: 'value' }, - series: [ - { - name: 'Email', - type: 'line', - stack: 'Total', - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - name: 'Union Ads', - type: 'line', - stack: 'Total', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: 'Video Ads', - type: 'line', - stack: 'Total', - data: [150, 232, 201, 154, 190, 330, 410] - }, - { - name: 'Direct', - type: 'line', - stack: 'Total', - data: [320, 332, 301, 334, 390, 330, 320] - }, - { - name: 'Search Engine', - type: 'line', - stack: 'Total', - data: [820, 932, 901, 934, 1290, 1330, 1320] - } - ] + series: lastyear.thisyeardata } }) const barChartOptions = { @@ -415,8 +355,8 @@ const updateLineChart = () => { } }; const updateLinesChart = () => { - if (linechart.value) { - createEcharts(linechart, linesChartOptions[selectedLinesPeriod.value]); + if (lineschart.value) { + createEcharts(lineschart, linesChartOptions[selectedLinesPeriod.value]); } }; const updatePieChart = () => { @@ -429,6 +369,14 @@ const updateLineChartData = (lineDates: any, lineData: any, chartOptions: any) = chartOptions.xAxis.data = lineDates; chartOptions.series[0].data = lineData; } +const updateLinesChartData = (disbursetype: any, disbursedate: any, disbursedata: any, chartOptions: any) => { + chartOptions.legend.data = disbursetype; + chartOptions.xAxis.data = disbursedate; + chartOptions.series = disbursedata; + console.log("disbursedata", disbursedata) + console.log("chartOptions", chartOptions) +} + const updatePieChartData = (pieData: any, chartOptions: any) => { chartOptions.series[0].data = pieData; } @@ -441,10 +389,36 @@ const fetchLineAndUpdateChart = async (days: number, chartOptions: any) => { createEcharts(linechart, chartOptions); } +const fetchLinesAndUpdateChart = async (days: number, chartOptions: any) => { + const now = new Date(); + let currentYear = now.getFullYear(); + if (days==1) { + currentYear=currentYear-1 + } + const months = Array.from({ length: 12 }, (_, i) => { + const month = (i + 1).toString().padStart(2, '0'); + return `${currentYear}-${month}`; + }); + const response = await get("/disburses/list/consume", { days }); + const data = response.data.data; + const disbursetype = data.map((item: any) => item.name) + const disbursedate = months + const disbursedata = data.map((item: any) => { + return { + name: item.name, + type: 'line', + stack: 'Total', + data: item.data + } + }) + console.log(`output->disbursedata`, disbursedata) + updateLinesChartData(disbursetype, disbursedate, disbursedata, chartOptions) + createEcharts(lineschart, chartOptions); +} + const fetchPieAndUpdateChart = async (days: number, chartOptions: any) => { const response = await get("/disburses/list/classifieddata", { days }); const data = response.data.data; - console.log(`output->data`, data) updatePieChartData(data, chartOptions); createEcharts(piechart, chartOptions); } @@ -455,6 +429,8 @@ const getLineYearList = () => fetchLineAndUpdateChart(365, lineChartOptions.nigh const getPieWeekList = () => fetchPieAndUpdateChart(7, pieChartOptions.nighweek); const getPieMonthList = () => fetchPieAndUpdateChart(30, pieChartOptions.nighmonth); const getPieYearList = () => fetchPieAndUpdateChart(365, pieChartOptions.nighyear); +const getLinesThisYearList = () => fetchLinesAndUpdateChart(0, linesChartOptions.thisyear) +const getLinesLastYearList = () => fetchLinesAndUpdateChart(1, linesChartOptions.lastyear) onMounted(() => { getLineWeekList() getLineMonthList() @@ -462,9 +438,11 @@ onMounted(() => { getPieWeekList() getPieMonthList() getPieYearList() + getLinesThisYearList() + getLinesLastYearList() + createEcharts(lineschart, linesChartOptions.thisyear) createEcharts(linechart, lineChartOptions.nighweek); createEcharts(piechart, pieChartOptions.nighweek); - createEcharts(lineschart, linesChartOptions); createEcharts(barchart, barChartOptions); });