项目初始化

web-api/src/main/java/com/jeesite/modules/apps/web/ErpScreenController.java

@@ -10,6 +10,7 @@ import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.math.BigDecimal;
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@@ -66,10 +67,10 @@ public class ErpScreenController {
             ChartDataItem item = new ChartDataItem();
             item.setItemCode("CHART");
             item.setAxisName(accountName);
-            item.setValue01(map.get("sumValue01").toString());
-            item.setValue02(map.get("sumValue02").toString());
-            item.setValue03(map.get("sumValue03").toString());
-            item.setBizKey(map.get("accountId").toString());
+            item.setValue01(map.get("sumValue01").toString()); // 收入
+            item.setValue02(map.get("sumValue02").toString()); // 支出
+            item.setValue03(map.get("sumValue03").toString()); // 净利润
+            item.setBizKey(map.get("accountId").toString()); // 业务编号
             chartDataItems.add(item);
         }
         return chartDataItems;
@@ -83,7 +84,7 @@ public class ErpScreenController {
     public List<ChartDataItem> getErpMonthChart(ErpTransactionFlow erpTransactionFlow) {
         List<ChartDataItem> chartDataItems = new ArrayList<>();
         List<ErpTransactionFlow> flowList = erpTransactionFlowService.findList(erpTransactionFlow);
-        Map<String, Map<String, Object>> accountMap = flowList.stream()
+        Map<String, Map<String, Object>> monthMap = flowList.stream()
                 .collect(Collectors.groupingBy(
                         ErpTransactionFlow::getMonthDate,
                         Collectors.collectingAndThen(Collectors.toList(), list -> {
@@ -105,15 +106,32 @@ public class ErpScreenController {
                             );
                         })
                 ));
-        for (Map.Entry<String, Map<String, Object>> entry : accountMap.entrySet()) {
-            String monthDate = entry.getKey();
-            Map<String, Object> map = entry.getValue();
+
+        List<String> sortedMonths = new ArrayList<>(monthMap.keySet());
+        Collections.sort(sortedMonths);
+        for (int i = 0; i < sortedMonths.size(); i++) {
+            String currentMonth = sortedMonths.get(i);
+            Map<String, Object> current = monthMap.get(currentMonth);
+            BigDecimal income = (BigDecimal) current.get("sumValue01");
+            BigDecimal expend = (BigDecimal) current.get("sumValue02");
+            BigDecimal profitRate = (BigDecimal) current.get("sumValue03");
+            BigDecimal profit = (BigDecimal) current.get("sumValue04");
+            BigDecimal lastIncome = BigDecimal.ZERO;
+            BigDecimal lastExpend = BigDecimal.ZERO;
+            if (i > 0) {
+                String lastMonth = sortedMonths.get(i - 1);
+                Map<String, Object> lastData = monthMap.get(lastMonth);
+                lastIncome = (BigDecimal) lastData.get("sumValue01");
+                lastExpend = (BigDecimal) lastData.get("sumValue02");
+            }
             ChartDataItem item = new ChartDataItem();
-            item.setAxisName(monthDate);
-            item.setValue01(map.get("sumValue01").toString());
-            item.setValue02(map.get("sumValue02").toString());
-            item.setValue03(map.get("sumValue03").toString());
-            item.setValue04(map.get("sumValue04").toString());
+            item.setAxisName(currentMonth);
+            item.setValue01(income.toString());        // 本月收入
+            item.setValue02(expend.toString());        // 本月支出
+            item.setValue03(profitRate.toString());    // 利润率
+            item.setValue04(profit.toString());        // 净利润
+            item.setValue05(lastIncome.toString());     // 上月收入
+            item.setValue06(lastExpend.toString());    // 上月支出
             chartDataItems.add(item);
         }
         return chartDataItems;
@@ -156,10 +174,10 @@ public class ErpScreenController {
             Map<String, Object> map = entry.getValue();
             ChartDataItem item = new ChartDataItem();
             item.setAxisName(quarter);
-            item.setValue01(map.get("sumValue01").toString());
-            item.setValue02(map.get("sumValue02").toString());
-            item.setValue03(map.get("sumValue03").toString());
-            item.setValue04(map.get("sumValue04").toString());
+            item.setValue01(map.get("sumValue01").toString()); // 收入
+            item.setValue02(map.get("sumValue02").toString()); // 支出
+            item.setValue03(map.get("sumValue03").toString()); // 占比
+            item.setValue04(map.get("sumValue04").toString()); // 净利润
             chartDataItems.add(item);
         }
         return chartDataItems;
@@ -202,8 +220,8 @@ public class ErpScreenController {
             Map<String, Object> map = entry.getValue();
             ChartDataItem item = new ChartDataItem();
             item.setAxisName(categoryName);
-            item.setValue01(map.get("sumValue01").toString());
-            item.setValue02(map.get("sumValue02").toString());
+            item.setValue01(map.get("sumValue01").toString()); // 收支金额
+            item.setValue02(map.get("sumValue02").toString()); // 占比
             chartDataItems.add(item);
         }
         return chartDataItems;

web-vue/packages/core/layouts/views/screen/welcome/Erp/components/ChartV09.vue

@@ -7,410 +7,420 @@
   </div>
 </template>
 
-<script setup>
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
-import * as echarts from 'echarts'
-// import { getItemInfoList } from '@/api/bizApi'
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
+  import * as echarts from 'echarts';
+  import { ChartDataItem, ErpMonthChart } from '@jeesite/erp/api/erp/screen';
 
-const props = defineProps({
-  formParams: {
-    type: Object,
-    default: () => ({})
-  }
-});
+  const props = defineProps({
+    formParams: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
 
-const vList = ref([])
-const chartRef = ref(null)
-let chartInstance = null
-const resizeHandler = () => chartInstance?.resize()
+  const vList = ref<ChartDataItem[]>([]);
+  const chartRef = ref<HTMLDivElement | null>(null);
+  let chartInstance: echarts.ECharts | null = null;
+  const resizeHandler = () => chartInstance?.resize();
 
-async function getList() {
-  try {
-    const params = {
-      ...props.formParams,
-      itemCode: 'ERP_YEARDATA_M001',
+  const parseAmount = (value?: string | number) => {
+    const parsed = Number(value ?? 0);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+
+  const parseRate = (value?: string | number) => {
+    const parsed = Number(value ?? 0);
+    return Number.isFinite(parsed) ? Number(parsed.toFixed(2)) : 0;
+  };
+
+  async function getList() {
+    try {
+      const params = {
+        ...props.formParams,
+      };
+      const res = await ErpMonthChart(params);
+      vList.value = res || [];
+    } catch (error) {
+      console.error(error);
+      vList.value = [];
     }
-    const res = await getItemInfoList(params)
-    vList.value = res || []
-  } catch (error) {
-    console.error(error)
-    vList.value = []
-  }
-}
-
-function initChart() {
-  const el = chartRef.value
-  if (!el) return
-
-  if (chartInstance) {
-    chartInstance.dispose()
-  }
-  chartInstance = echarts.init(el)
-
-  const baseOption = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'cross' },
-      backgroundColor: 'rgba(145, 200, 255, 0.9)',
-      borderColor: '#409EFF',
-      borderWidth: 1,
-      textStyle: { color: '#0a3b70' },
-      padding: [8, 12],
-      borderRadius: 6
-    },
-    legend: {
-      top: '10',
-      left: 'center',
-      textStyle: { fontSize: 12, color: '#e0e6ff' },
-      data: ['收入', '支出', '占比', '上月收入', '上月支出', '收入环比', '支出环比', '本月净利润']
-    },
-    grid: {
-      left: '5%',
-      right: '5%',
-      bottom: '10%',
-      top: '15%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        data: [],
-        axisLabel: {
-          fontSize: 11,
-          interval: 0,
-          color: '#b4c7e7'
-        },
-        axisLine: { lineStyle: { color: '#1a508b' } },
-        boundaryGap: true
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        name: '金额 (万元)',
-        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
-        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
-        axisLine: { lineStyle: { color: '#1a508b' } },
-        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
-      },
-      {
-        type: 'value',
-        name: '占比/环比 (%)',
-        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
-        axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
-        axisLine: { lineStyle: { color: '#1a508b' } },
-        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
-        min: 'dataMin',
-        max: 'dataMax',
-        scale: true
-      }
-    ],
-    series: [
-      {
-        name: '收入',
-        type: 'line',
-        yAxisIndex: 0,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#67C23A' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
-            { offset: 1, color: 'rgba(103, 194, 58, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '支出',
-        type: 'line',
-        yAxisIndex: 0,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#F56C6C' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
-            { offset: 1, color: 'rgba(245, 108, 108, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '占比',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#409EFF' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
-            { offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '上月收入',
-        type: 'line',
-        yAxisIndex: 0,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#36CFc9' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
-            { offset: 1, color: 'rgba(54, 207, 201, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '上月支出',
-        type: 'line',
-        yAxisIndex: 0,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#E6A23C' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
-            { offset: 1, color: 'rgba(230, 162, 60, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '收入环比',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#722ED1' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(114, 46, 209, 0.3)' },
-            { offset: 1, color: 'rgba(114, 46, 209, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '支出环比',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [],
-        smooth: true,
-        lineStyle: { width: 1.5, color: '#EB2F96' },
-        symbol: 'circle',
-        symbolSize: 5,
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(235, 47, 150, 0.3)' },
-            { offset: 1, color: 'rgba(235, 47, 150, 0.0)' }
-          ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
-        }
-      },
-      {
-        name: '本月净利润',
-        type: 'bar',
-        yAxisIndex: 0,
-        data: [],
-        barWidth: '12%',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#FF9D28' },
-            { offset: 1, color: '#FAAD14' }
-          ]),
-          borderRadius: [8, 8, 0, 0]
-        },
-        label: {
-          show: true,
-          position: 'top',
-          fontSize: 10,
-          color: '#fff',
-          formatter: '{c}'
-        }
-      }
-    ]
   }
 
-  if (vList.value.length > 0) {
-    const xData = vList.value.map(item => {
-      const xaxis = item.xaxis || ''
-      return xaxis.includes('月') ? xaxis : `${xaxis}月`;
-    })
-    const incomeYuan = vList.value.map(item => Number(item.index01 || 0))
-    const expenseYuan = vList.value.map(item => Number(item.index02 || 0))
-    const rate = vList.value.map(item => Number(item.index03 || 0).toFixed(2))
-    const lastMonthIncomeYuan = vList.value.map(item => Number(item.index04 || 0))
-    const lastMonthExpenseYuan = vList.value.map(item => Number(item.index05 || 0))
-    const netProfitYuan = vList.value.map(item => (Number(item.index01 || 0) - Number(item.index02 || 0)).toFixed(2))
+  function initChart() {
+    const el = chartRef.value;
+    if (!el) return;
 
-    const incomeRingRatio = vList.value.map((item, idx) => {
-      const lastVal = lastMonthIncomeYuan[idx]
-      const currVal = incomeYuan[idx] || 0
-      return lastVal === 0 ? '0.00' : ((currVal - lastVal) / lastVal * 100).toFixed(2)
-    })
-    const expenseRingRatio = vList.value.map((item, idx) => {
-      const lastVal = lastMonthExpenseYuan[idx]
-      const currVal = expenseYuan[idx] || 0
-      return lastVal === 0 ? '0.00' : ((currVal - lastVal) / lastVal * 100).toFixed(2)
-    })
+    if (chartInstance) {
+      chartInstance.dispose();
+    }
+    chartInstance = echarts.init(el);
 
-    const incomeWan = incomeYuan.map(val => (val / 10000).toFixed(2))
-    const expenseWan = expenseYuan.map(val => (val / 10000).toFixed(2))
-    const lastMonthIncomeWan = lastMonthIncomeYuan.map(val => (val / 10000).toFixed(2))
-    const lastMonthExpenseWan = lastMonthExpenseYuan.map(val => (val / 10000).toFixed(2))
-    const netProfitWan = netProfitYuan.map(val => (val / 10000).toFixed(2))
+    const baseOption: echarts.EChartsOption & {
+      tooltip: echarts.TooltipComponentOption;
+      xAxis: Array<echarts.XAXisComponentOption & { data: string[] }>;
+      series: echarts.SeriesOption[];
+    } = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'cross' },
+        backgroundColor: 'rgba(145, 200, 255, 0.9)',
+        borderColor: '#409EFF',
+        borderWidth: 1,
+        textStyle: { color: '#0a3b70' },
+        padding: [8, 12],
+        borderRadius: 6,
+      },
+      legend: {
+        top: '10',
+        left: 'center',
+        textStyle: { fontSize: 12, color: '#e0e6ff' },
+        data: ['本月收入', '本月支出', '利润率', '上月收入', '上月支出', '收入环比', '支出环比', '净利润'],
+      },
+      grid: {
+        left: '5%',
+        right: '5%',
+        bottom: '10%',
+        top: '15%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: [],
+          axisLabel: {
+            fontSize: 11,
+            interval: 0,
+            color: '#b4c7e7',
+          },
+          axisLine: { lineStyle: { color: '#1a508b' } },
+          boundaryGap: true,
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name: '金额 (万元)',
+          nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+          axisLabel: { formatter: '{value}', color: '#b4c7e7' },
+          axisLine: { lineStyle: { color: '#1a508b' } },
+          splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
+        },
+        {
+          type: 'value',
+          name: '占比/环比 (%)',
+          nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+          axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
+          axisLine: { lineStyle: { color: '#1a508b' } },
+          splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
+          min: 'dataMin',
+          max: 'dataMax',
+          scale: true,
+        },
+      ],
+      series: [
+        {
+          name: '本月收入',
+          type: 'line',
+          yAxisIndex: 0,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#67C23A' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
+              { offset: 1, color: 'rgba(103, 194, 58, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '本月支出',
+          type: 'line',
+          yAxisIndex: 0,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#F56C6C' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
+              { offset: 1, color: 'rgba(245, 108, 108, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '利润率',
+          type: 'line',
+          yAxisIndex: 1,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#409EFF' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+              { offset: 1, color: 'rgba(64, 158, 255, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '上月收入',
+          type: 'line',
+          yAxisIndex: 0,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#36CFc9' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
+              { offset: 1, color: 'rgba(54, 207, 201, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '上月支出',
+          type: 'line',
+          yAxisIndex: 0,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#E6A23C' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
+              { offset: 1, color: 'rgba(230, 162, 60, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '收入环比',
+          type: 'line',
+          yAxisIndex: 1,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#722ED1' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(114, 46, 209, 0.3)' },
+              { offset: 1, color: 'rgba(114, 46, 209, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '支出环比',
+          type: 'line',
+          yAxisIndex: 1,
+          data: [],
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#EB2F96' },
+          symbol: 'circle',
+          symbolSize: 5,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(235, 47, 150, 0.3)' },
+              { offset: 1, color: 'rgba(235, 47, 150, 0.0)' },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        },
+        {
+          name: '净利润',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: [],
+          barWidth: '12%',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#FF9D28' },
+              { offset: 1, color: '#FAAD14' },
+            ]),
+            borderRadius: [8, 8, 0, 0],
+          },
+          label: {
+            show: true,
+            position: 'top',
+            fontSize: 10,
+            color: '#fff',
+            formatter: '{c}',
+          },
+        },
+      ],
+    };
 
-    baseOption.tooltip.formatter = function (params) {
-      const title = params[0].axisValue
-      const idx = params[0].dataIndex
-      return `
-<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
-<table style="width:100%; border-collapse:collapse; text-align:center">
-  <tr>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月收入(元)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月支出(元)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月收入(元)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月支出(元)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入环比(%)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出环比(%)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">占比(%)</td>
-    <td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td>
-  </tr>
-  <tr>
-    <td style="border:1px solid #409EFF; padding:4px">${incomeYuan[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${expenseYuan[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${lastMonthIncomeYuan[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${lastMonthExpenseYuan[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${incomeRingRatio[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${expenseRingRatio[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${rate[idx]}</td>
-    <td style="border:1px solid #409EFF; padding:4px">${netProfitYuan[idx]}</td>
-  </tr>
-</table>
-      `
+    if (vList.value.length > 0) {
+      const xData = vList.value.map((item) => {
+        const xaxis = item.axisName || '';
+        return xaxis.includes('月') ? xaxis : `${xaxis}月`;
+      });
+      const incomeYuan = vList.value.map((item) => parseAmount(item.value01));
+      const expenseYuan = vList.value.map((item) => parseAmount(item.value02));
+      const rate = vList.value.map((item) => parseRate(item.value03));
+      const netProfitYuan = vList.value.map((item) => parseAmount(item.value04));
+      const lastMonthIncomeYuan = vList.value.map((item) => parseAmount(item.value05));
+      const lastMonthExpenseYuan = vList.value.map((item) => parseAmount(item.value06));
+
+      const incomeRingRatio = vList.value.map((item, idx) => {
+        const lastVal = lastMonthIncomeYuan[idx];
+        const currVal = incomeYuan[idx] || 0;
+        return lastVal === 0 ? 0 : Number((((currVal - lastVal) / lastVal) * 100).toFixed(2));
+      });
+      const expenseRingRatio = vList.value.map((item, idx) => {
+        const lastVal = lastMonthExpenseYuan[idx];
+        const currVal = expenseYuan[idx] || 0;
+        return lastVal === 0 ? 0 : Number((((currVal - lastVal) / lastVal) * 100).toFixed(2));
+      });
+
+      const incomeWan = incomeYuan.map((val) => Number((val / 10000).toFixed(2)));
+      const expenseWan = expenseYuan.map((val) => Number((val / 10000).toFixed(2)));
+      const lastMonthIncomeWan = lastMonthIncomeYuan.map((val) => Number((val / 10000).toFixed(2)));
+      const lastMonthExpenseWan = lastMonthExpenseYuan.map((val) => Number((val / 10000).toFixed(2)));
+      const netProfitWan = netProfitYuan.map((val) => Number((val / 10000).toFixed(2)));
+
+      baseOption.tooltip.formatter = function (params) {
+        const title = params[0].axisValue;
+        const idx = params[0].dataIndex;
+        return `
+		<div style="text-align:center; font-weight:bold; margin-bottom:6px">${title}</div>
+		<table style="width:100%; border-collapse:collapse; text-align:center">
+		  <tr>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月收入(元)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">本月支出(元)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月收入(元)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">上月支出(元)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">收入环比(%)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">支出环比(%)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">利润率(%)</td>
+			<td style="border:1px solid #409EFF; padding:4px; font-weight:bold">净利润(元)</td>
+		  </tr>
+		  <tr>
+			<td style="border:1px solid #409EFF; padding:4px">${incomeYuan[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${expenseYuan[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${lastMonthIncomeYuan[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${lastMonthExpenseYuan[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${incomeRingRatio[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${expenseRingRatio[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${rate[idx]}</td>
+			<td style="border:1px solid #409EFF; padding:4px">${netProfitYuan[idx]}</td>
+		  </tr>
+		</table>
+      `;
+      };
+
+      baseOption.xAxis[0].data = xData;
+      baseOption.series[0].data = incomeWan;
+      baseOption.series[1].data = expenseWan;
+      baseOption.series[2].data = rate;
+      baseOption.series[3].data = lastMonthIncomeWan;
+      baseOption.series[4].data = lastMonthExpenseWan;
+      baseOption.series[5].data = incomeRingRatio;
+      baseOption.series[6].data = expenseRingRatio;
+      baseOption.series[7].data = netProfitWan;
     }
 
-    baseOption.xAxis[0].data = xData
-    baseOption.series[0].data = incomeWan
-    baseOption.series[1].data = expenseWan
-    baseOption.series[2].data = rate
-    baseOption.series[3].data = lastMonthIncomeWan
-    baseOption.series[4].data = lastMonthExpenseWan
-    baseOption.series[5].data = incomeRingRatio
-    baseOption.series[6].data = expenseRingRatio
-    baseOption.series[7].data = netProfitWan
+    chartInstance.setOption(baseOption, true);
   }
 
-  chartInstance.setOption(baseOption, true)
-}
+  watch(
+    () => props.formParams,
+    () => {
+      getList();
+    },
+    { deep: true, immediate: true },
+  );
 
-watch(
-  () => props.formParams,
-  () => {
-    getList()
-  },
-  { deep: true, immediate: true }
-)
+  watch(
+    vList,
+    () => {
+      nextTick(() => initChart());
+    },
+    { deep: true },
+  );
 
-watch(vList, () => {
-  nextTick(() => initChart())
-}, { deep: true })
+  onMounted(() => {
+    initChart();
+    window.addEventListener('resize', resizeHandler);
+  });
 
-onMounted(() => {
-  initChart()
-  window.addEventListener('resize', resizeHandler)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', resizeHandler)
-  if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
-  }
-})
+  onUnmounted(() => {
+    window.removeEventListener('resize', resizeHandler);
+    if (chartInstance) {
+      chartInstance.dispose();
+      chartInstance = null;
+    }
+  });
 </script>
 
 <style scoped>
-.chart-card {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
-  background-size: 100% 100%;
-}
+  .chart-card {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/box/16.png') no-repeat;
+    background-size: 100% 100%;
+  }
 
-.chart-card-header {
-  height: 40px;
-  line-height: 40px;
-  padding: 0 16px;
-  background-color: rgba(26, 80, 139, 0.5);
-  border-bottom: 1px solid #1a508b;
-  display: flex;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/14.png") no-repeat;
-  background-size: 100% 100%;
-}
+  .chart-card-header {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 16px;
+    background-color: rgba(26, 80, 139, 0.5);
+    border-bottom: 1px solid #1a508b;
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/title/14.png') no-repeat;
+    background-size: 100% 100%;
+  }
 
-.chart-card-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #409EFF;
-  letter-spacing: 0.5px;
-}
+  .chart-card-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #409eff;
+    letter-spacing: 0.5px;
+  }
 
-.bar-line-chart-container {
-  flex: 1;
-  width: 100%;
-  height: calc(100% - 40px);
-}
+  .bar-line-chart-container {
+    flex: 1;
+    width: 100%;
+    height: calc(100% - 40px);
+  }
 
-:deep(.echarts-tooltip) {
-  background-color: rgba(145, 200, 255, 0.9) !important;
-  border-color: #409EFF !important;
-  color: #0a3b70 !important;
-  border-radius: 6px !important;
-  white-space: nowrap !important;
-  max-width: none !important;
-}
-</style>
+  :deep(.echarts-tooltip) {
+    background-color: rgba(145, 200, 255, 0.9) !important;
+    border-color: #409eff !important;
+    color: #0a3b70 !important;
+    border-radius: 6px !important;
+    white-space: nowrap !important;
+    max-width: none !important;
+  }
+</style>