add new

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);
     })

src/views/blog/AmountChartView.vue

@@ -39,8 +39,8 @@ const lineschart = ref(null);
 const piechart = ref(null);
 const barchart = ref(null);
 const selectedLinePeriod: Ref<Period> = ref('nighweek');
-const selectedLinesPeriod: Ref<Periods> = ref('thisyear');
 const selectedPiePeriod: Ref<Period> = ref('nighweek');
+const selectedLinesPeriod: Ref<Periods> = 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<any[]>([])
 const piedata = ref([])
 const lineChartOptions = reactive<Record<Period, any>>({
     nighweek: {
@@ -157,13 +159,13 @@ const lineChartOptions = reactive<Record<Period, any>>({
 const linesChartOptions = reactive<Record<Periods, any>>({
     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<Record<Periods, any>>({
         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<Record<Periods, any>>({
         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);
 });