From ed0f6242330d2ae51d516860bbe3c4b944d486b4 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Thu, 26 Feb 2026 21:58:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B9=E7=9B=AE=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../screen/Erp/components/ChartV01.vue        | 314 +++++++++++++
 .../screen/Erp/components/ChartV02.vue        | 282 ++++++++++++
 .../screen/Erp/components/ChartV03.vue        | 283 ++++++++++++
 .../screen/Erp/components/ChartV04.vue        | 224 ++++++++++
 .../screen/Erp/components/ChartV05.vue        | 224 ++++++++++
 .../screen/Erp/components/ChartV06.vue        | 204 +++++++++
 .../screen/Erp/components/ChartV07.vue        | 412 ++++++++++++++++++
 7 files changed, 1943 insertions(+)
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV01.vue
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV02.vue
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV03.vue
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV04.vue
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV05.vue
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV06.vue
 create mode 100644 screen-vue/src/views/desktop/screen/Erp/components/ChartV07.vue

diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV01.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV01.vue
new file mode 100644
index 0000000..345c46e
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV01.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">月度收支分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_YEARPSAV_M001',
+    }
+    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 = 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: 'bar',
+        yAxisIndex: 0,
+        data: [],
+        barWidth: '12%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#85E868' },
+            { offset: 1, color: '#67C23A' }
+          ]),
+          borderRadius: [8, 8, 0, 0]
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '支出',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: [],
+        barWidth: '12%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#FF8A8A' },
+            { offset: 1, color: '#F56C6C' }
+          ]),
+          borderRadius: [8, 8, 0, 0]
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '利润率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [],
+        smooth: true,
+        lineStyle: { width: 1.5, color: '#409EFF' },
+        symbol: 'circle',
+        symbolSize: 5,
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#409EFF',
+          formatter: '{c}',
+          offset: [0, -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: '#FF9D28' },
+        symbol: 'circle',
+        symbolSize: 5,
+        label: {
+          show: true,
+          fontSize: 10,
+          color: '#FF9D28',
+          formatter: '{c}'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(255, 157, 40, 0.3)' },
+            { offset: 1, color: 'rgba(255, 157, 40, 0)' }
+          ])
+        },
+        emphasis: {
+          lineStyle: { width: 2 },
+          symbolSize: 7
+        }
+      }
+    ]
+  }
+
+  if (vList.value.length > 0) {
+    const xData = vList.value.map(item => {
+      const xaxis = item.xaxis || ''
+      return xaxis.includes('月') ? xaxis : `${xaxis}月`;
+    })
+    const index01Yuan = vList.value.map(item => item.index01 || 0)
+    const index02Yuan = vList.value.map(item => item.index02 || 0)
+    const index03 = vList.value.map(item => item.index03 || 0)
+    const index04Yuan = vList.value.map(item => item.index04 || 0)
+
+    const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
+    const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
+    const index04Wan = index04Yuan.map(val => (val / 10000).toFixed(2))
+
+    baseOption.tooltip.formatter = function (params) {
+      const title = params[0].axisValue
+      const idx = params[0].dataIndex
+      const incomeVal = index01Yuan[idx]
+      const expenseVal = index02Yuan[idx]
+      const rateVal = index03[idx]
+      const profitVal = index04Yuan[idx]
+      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>
+  </tr>
+  <tr>
+    <td style="border:1px solid #409EFF; padding:4px">${incomeVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${expenseVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${rateVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${profitVal}</td>
+  </tr>
+</table>
+      `
+    }
+
+    baseOption.xAxis[0].data = xData
+    baseOption.series[0].data = index01Wan
+    baseOption.series[1].data = index02Wan
+    baseOption.series[2].data = index03
+    baseOption.series[3].data = index04Wan
+  }
+
+  chartInstance.setOption(baseOption, true)
+}
+
+watch(
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  nextTick(() => initChart())
+}, { deep: true })
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.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);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV02.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV02.vue
new file mode 100644
index 0000000..54e5262
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV02.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">季度收支分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_YEARQUAR_Y001',
+    }
+    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 = 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: 'bar',
+        yAxisIndex: 0,
+        data: [],
+        barWidth: '12%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#85E868' },
+            { offset: 1, color: '#67C23A' }
+          ]),
+          borderRadius: [8, 8, 0, 0]
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '支出',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: [],
+        barWidth: '12%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#FF8A8A' },
+            { offset: 1, color: '#F56C6C' }
+          ]),
+          borderRadius: [8, 8, 0, 0]
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '占比',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [],
+        smooth: true,
+        lineStyle: { width: 1.5, color: '#409EFF' },
+        symbol: 'circle',
+        symbolSize: 5,
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#409EFF',
+          formatter: '{c}',
+          offset: [0, -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
+        }
+      }
+    ]
+  }
+
+  if (vList.value.length > 0) {
+    const xData = vList.value.map(item => {
+      const xaxis = item.xaxis || ''
+      return xaxis;
+    })
+    const index01Yuan = vList.value.map(item => item.index01 || 0)
+    const index02Yuan = vList.value.map(item => item.index02 || 0)
+    const index03 = vList.value.map(item => item.index03 || 0)
+
+    const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
+    const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
+
+    baseOption.tooltip.formatter = function (params) {
+      const title = params[0].axisValue
+      const idx = params[0].dataIndex
+      const incomeVal = index01Yuan[idx]
+      const expenseVal = index02Yuan[idx]
+      const rateVal = index03[idx]
+      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>
+  </tr>
+  <tr>
+    <td style="border:1px solid #409EFF; padding:4px">${incomeVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${expenseVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${rateVal}</td>
+  </tr>
+</table>
+      `
+    }
+
+    baseOption.xAxis[0].data = xData
+    baseOption.series[0].data = index01Wan
+    baseOption.series[1].data = index02Wan
+    baseOption.series[2].data = index03
+  }
+
+  chartInstance.setOption(baseOption, true)
+}
+
+watch(
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  nextTick(() => initChart())
+}, { deep: true })
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.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);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV03.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV03.vue
new file mode 100644
index 0000000..7a5e97f
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV03.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">账户收支分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_ACCOUNT_Y001',
+    }
+    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 = 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: 'bar',
+        yAxisIndex: 0,
+        data: [],
+        barWidth: '12%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#85E868' },
+            { offset: 1, color: '#67C23A' }
+          ]),
+          borderRadius: [8, 8, 0, 0]
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '支出',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: [],
+        barWidth: '12%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#FF8A8A' },
+            { offset: 1, color: '#F56C6C' }
+          ]),
+          borderRadius: [8, 8, 0, 0]
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
+      },
+      {
+        name: '净利润',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [],
+        smooth: true,
+        lineStyle: { width: 1.5, color: '#409EFF' },
+        symbol: 'circle',
+        symbolSize: 5,
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#409EFF',
+          formatter: '{c}',
+          offset: [0, -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
+        }
+      }
+    ]
+  }
+
+  if (vList.value.length > 0) {
+    const xData = vList.value.map(item => {
+      const xaxis = item.xaxis || ''
+      return xaxis;
+    })
+    const index01Yuan = vList.value.map(item => item.index01 || 0)
+    const index02Yuan = vList.value.map(item => item.index02 || 0)
+    const index03Yuan = vList.value.map(item => item.index03 || 0)
+
+    const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
+    const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
+    const index03Wan = index03Yuan.map(val => (val / 10000).toFixed(2))
+
+    baseOption.tooltip.formatter = function (params) {
+      const title = params[0].axisValue
+      const idx = params[0].dataIndex
+      const incomeVal = index01Yuan[idx]
+      const expenseVal = index02Yuan[idx]
+      const netProfitVal = index03Yuan[idx]
+      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>
+  </tr>
+  <tr>
+    <td style="border:1px solid #409EFF; padding:4px">${incomeVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${expenseVal}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${netProfitVal}</td>
+  </tr>
+</table>
+      `
+    }
+
+    baseOption.xAxis[0].data = xData
+    baseOption.series[0].data = index01Wan
+    baseOption.series[1].data = index02Wan
+    baseOption.series[2].data = index03Wan
+  }
+
+  chartInstance.setOption(baseOption, true)
+}
+
+watch(
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  nextTick(() => initChart())
+}, { deep: true })
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.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);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV04.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV04.vue
new file mode 100644
index 0000000..f07159b
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV04.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">支出结构分析</span>
+    </div>
+    <div class="pie-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_CATEGORY_Y001',
+    }
+    const res = await getItemInfoList(params)
+    vList.value = res || []
+  } catch (error) {
+    console.error('获取支出数据失败:', error)
+    vList.value = []
+  }
+}
+
+const initPieChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  chartInstance = echarts.init(el)
+
+  const pieData = vList.value.map(item => {
+    const originalValue = item.index01 || 0
+    const wanValue = (originalValue / 10000).toFixed(2)
+    return {
+      name: item.xaxis || '未知分类',
+      value: Number(wanValue),
+      originalValue: originalValue
+    }
+  }).filter(item => item.value > 0)
+
+  const colorList = [
+    '#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
+    '#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
+    '#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
+  ]
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 12 },
+      padding: [10, 15],
+      borderRadius: 6,
+      formatter: function(params) {
+        return `分类：${params.name}<br/>支出：${params.data.originalValue}元<br/>占比：${params.percent.toFixed(1)}%`
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      top: '10%',
+      left: 'center',
+      textStyle: { fontSize: 11, color: '#e0e6ff' },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 10,
+      pageIconColor: '#409EFF',
+      pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
+      pageButtonItemGap: 6,
+      pageButtonGap: 10,
+      type: 'scroll'
+    },
+    series: [
+      {
+        name: '支出',
+        type: 'pie',
+        radius: ['30%', '55%'],
+        center: ['50%', '65%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: 'rgba(15, 52, 96, 0.9)',
+          borderWidth: 1
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: '{b} {c}万元 ({d}%)',
+          overflow: 'truncate',
+          ellipsis: '...',
+          distance: 8
+        },
+        labelLine: {
+          show: true,
+          length: 12,
+          length2: 8,
+          lineStyle: { color: '#e0e6ff', width: 1 },
+          smooth: 0.2,
+          minTurnAngle: 45
+        },
+        data: pieData,
+        color: colorList
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+watch(
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  initPieChart()
+}, { deep: true })
+
+onMounted(() => {
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.pie-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+
+:deep(.echarts-legend-scroll) {
+  background-color: transparent !important;
+}
+:deep(.echarts-legend-scroll-text) {
+  color: #e0e6ff !important;
+  font-size: 11px !important;
+}
+:deep(.echarts-legend-scroll-button) {
+  border-color: #1a508b !important;
+}
+:deep(.echarts-legend-scroll-button-icon) {
+  color: #409EFF !important;
+}
+
+:deep(.ec-label) {
+  z-index: 9999 !important;
+  white-space: nowrap !important;
+  font-size: 10px !important;
+  color: #e0e6ff !important;
+}
+
+:deep(.ec-label-line) {
+  stroke: #e0e6ff !important;
+  stroke-width: 1px !important;
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV05.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV05.vue
new file mode 100644
index 0000000..41245ea
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV05.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">收入来源分析</span>
+    </div>
+    <div class="pie-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_CATEGORY_Y002',
+    }
+    const res = await getItemInfoList(params)
+    vList.value = res || []
+  } catch (error) {
+    console.error('获取收入数据失败:', error)
+    vList.value = []
+  }
+}
+
+const initPieChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  
+  chartInstance = echarts.init(el)
+
+  const pieData = vList.value.map(item => {
+    const originalValue = item.index01 || 0
+    const wanValue = (originalValue / 10000).toFixed(2)
+    return {
+      name: item.xaxis || '未知分类',
+      value: Number(wanValue),
+      originalValue: originalValue
+    }
+  }).filter(item => item.value > 0)
+
+  const colorList = [
+    '#409EFF', '#36CFc9', '#67C23A', '#E6A23C', '#F56C6C',
+    '#909399', '#722ED1', '#EB2F96', '#1890FF', '#52C41A',
+    '#FAAD14', '#F5222D', '#8C8C8C', '#A062D4', '#F7BA1E'
+  ]
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 12 },
+      padding: [10, 15],
+      borderRadius: 6,
+      formatter: function(params) {
+        return `分类：${params.name}<br/>收入：${params.data.originalValue}元<br/>占比：${params.percent.toFixed(1)}%`
+      }
+    },
+    legend: {
+      orient: 'horizontal',
+      top: '10%',
+      left: 'center',
+      textStyle: { fontSize: 11, color: '#e0e6ff' },
+      itemWidth: 12,
+      itemHeight: 12,
+      itemGap: 10,
+      pageIconColor: '#409EFF',
+      pageTextStyle: { color: '#e0e6ff', fontSize: 10 },
+      pageButtonItemGap: 6,
+      pageButtonGap: 10,
+      type: 'scroll'
+    },
+    series: [
+      {
+        name: '收入',
+        type: 'pie',
+        radius: ['30%', '55%'],
+        center: ['50%', '65%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: 'rgba(15, 52, 96, 0.9)',
+          borderWidth: 1
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: '{b} {c}万元 ({d}%)',
+          overflow: 'truncate',
+          ellipsis: '...',
+          distance: 8
+        },
+        labelLine: {
+          show: true,
+          length: 12,
+          length2: 8,
+          lineStyle: { color: '#e0e6ff', width: 1 },
+          smooth: 0.2,
+          minTurnAngle: 45
+        },
+        data: pieData,
+        color: colorList
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+watch(
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  initPieChart()
+}, { deep: true })
+
+onMounted(() => {
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.pie-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+
+:deep(.echarts-legend-scroll) {
+  background-color: transparent !important;
+}
+:deep(.echarts-legend-scroll-text) {
+  color: #e0e6ff !important;
+  font-size: 11px !important;
+}
+:deep(.echarts-legend-scroll-button) {
+  border-color: #1a508b !important;
+}
+:deep(.echarts-legend-scroll-button-icon) {
+  color: #409EFF !important;
+}
+
+:deep(.ec-label) {
+  z-index: 9999 !important;
+  white-space: nowrap !important;
+  font-size: 10px !important;
+  color: #e0e6ff !important;
+}
+
+:deep(.ec-label-line) {
+  stroke: #e0e6ff !important;
+  stroke-width: 1px !important;
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV06.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV06.vue
new file mode 100644
index 0000000..c2a13c2
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV06.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">支出排名分析</span>
+    </div>
+    <div class="rank-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_YEARRANK_Y001',
+    }
+    const res = await getItemInfoList(params)
+    vList.value = res || []
+  } catch (error) {
+    console.error(error)
+    vList.value = []
+  }
+}
+
+const initRankChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+
+  chartInstance = echarts.init(el)
+
+  const sortedList = [...vList.value]
+    .sort((a, b) => Number(b.index01 || 0) - Number(a.index01 || 0))
+    .slice(0, 10)
+
+  const yData = sortedList.map((item, index) => `${index + 1}. ${item.xaxis || '未知'}`)
+  const valueData = sortedList.map(item => Number((Number(item.index01 || 0) / 10000).toFixed(2)) || 0)
+  const percentData = sortedList.map(item => Number(Number(item.index02 || 0).toFixed(2)) || 0)
+  const originalData = sortedList.map(item => Number(item.index01 || 0))
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: params => {
+        const idx = params[0].dataIndex
+        const name = params[0].name
+        const amount = originalData[idx]
+        const rate = percentData[idx]
+        return `
+<div style="text-align:center; font-weight:bold; margin-bottom:6px">${name}</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>
+  </tr>
+  <tr>
+    <td style="border:1px solid #409EFF; padding:4px">${amount}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${rate}</td>
+  </tr>
+</table>
+        `
+      }
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '5%',
+      right: '15%',
+      bottom: '10%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'value',
+        axisLabel: { fontSize: 11, color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        data: yData,
+        axisLabel: { fontSize: 11, color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        inverse: true
+      }
+    ],
+    series: [
+      {
+        name: '支出',
+        type: 'bar',
+        barWidth: '15%',
+        data: valueData,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: '#409EFF' },
+            { offset: 0, color: '#409EFF' },
+            { offset: 1, color: '#1890FF' }
+          ])
+        },
+        label: {
+          show: true,
+          position: 'right',
+          fontSize: 10,
+          color: '#e0e6ff',
+          formatter: params => `${params.value} 万元 (${percentData[params.dataIndex]}%)`
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+watch(() => props.formParams, () => {
+  getList()
+}, { deep: true, immediate: true })
+
+watch(vList, () => {
+  initRankChart()
+}, { deep: true })
+
+onMounted(() => {
+  initRankChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.rank-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;
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/desktop/screen/Erp/components/ChartV07.vue b/screen-vue/src/views/desktop/screen/Erp/components/ChartV07.vue
new file mode 100644
index 0000000..46ef3ee
--- /dev/null
+++ b/screen-vue/src/views/desktop/screen/Erp/components/ChartV07.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">环比收支分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/itemInfo'
+
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+const resizeHandler = () => chartInstance?.resize()
+
+async function getList() {
+  try {
+    const params = {
+      ...props.formParams,
+      itemCode: 'ERP_YEARDATA_M001',
+    }
+    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: '8%',
+        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))
+
+    const incomeRingRatio = vList.value.map((item, idx) => {
+      const lastVal = lastMonthIncomeYuan[idx] || 1
+      const currVal = incomeYuan[idx] || 0
+      return ((currVal - lastVal) / lastVal * 100).toFixed(2)
+    })
+    const expenseRingRatio = vList.value.map((item, idx) => {
+      const lastVal = lastMonthExpenseYuan[idx] || 1
+      const currVal = expenseYuan[idx] || 0
+      return ((currVal - lastVal) / lastVal * 100).toFixed(2)
+    })
+
+    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))
+
+    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">${rate[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">${netProfitYuan[idx]}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${incomeRingRatio[idx]}</td>
+    <td style="border:1px solid #409EFF; padding:4px">${expenseRingRatio[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
+  }
+
+  chartInstance.setOption(baseOption, true)
+}
+
+watch(
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  nextTick(() => initChart())
+}, { deep: true })
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+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;
+}
+
+.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;
+}
+
+.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);
+}
+
+: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>
\ No newline at end of file