大屏页面初始化

screen-vue/src/views/desktop/screen/Erp/components/ChartV01.vue

@@ -1,314 +1,2 @@
 <template>
-  <div class="chart-card">
+</template>
-    <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/bizApi'
-
-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>

screen-vue/src/views/desktop/screen/Erp/components/ChartV02.vue

@@ -1,34 +1,29 @@
 <template>
   <div class="chart-card">
     <div class="chart-card-header">
-      <span class="chart-card-title">季度收支分析</span>
+      <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 { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { getItemInfoList } from '@/api/bizApi'
 
-const props = defineProps({
-  formParams: {
-    type: Object,
-    default: () => ({})
-  }
-});
-
 const vList = ref([])
 const chartRef = ref(null)
 let chartInstance = null
-const resizeHandler = () => chartInstance?.resize()
+
+const resizeHandler = () => {
+  chartInstance?.resize()
+}
 
 async function getList() {
   try {
     const params = {
-      ...props.formParams,
+      itemCode: 'ERP_YEARPMOM_M001',
-      itemCode: 'ERP_YEARQUAR_Y001',
     }
     const res = await getItemInfoList(params)
     vList.value = res || []
@@ -46,7 +41,16 @@ function initChart() {
     chartInstance = echarts.init(el)
   }
 
-  const baseOption = {
+  const xData = vList.value.map(item => item.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 index04 = 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 option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: { type: 'cross' },
@@ -55,13 +59,32 @@ function initChart() {
       borderWidth: 1,
       textStyle: { color: '#0a3b70' },
       padding: [8, 12],
-      borderRadius: 6
+      borderRadius: 6,
+      formatter: params => {
+        const idx = params[0].dataIndex
+        return `
+<div style="text-align:center;font-weight:bold;margin-bottom:6px">${params[0].axisValue}</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">${index01Yuan[idx]}</td>
+    <td style="border:1px solid #409EFF;padding:4px">${index02Yuan[idx]}</td>
+    <td style="border:1px solid #409EFF;padding:4px">${index03[idx]}</td>
+    <td style="border:1px solid #409EFF;padding:4px">${index04[idx]}</td>
+  </tr>
+</table>`
+      }
     },
     legend: {
       top: '10',
       left: 'center',
       textStyle: { fontSize: 12, color: '#e0e6ff' },
-      data: ['收入', '支出', '占比']
+      data: ['收入', '支出', '利润率', '占比']
     },
     grid: {
       left: '5%',
@@ -70,19 +93,13 @@ function initChart() {
       top: '15%',
       containLabel: true
     },
-    xAxis: [
+    xAxis: [{
-      {
+      type: 'category',
-        type: 'category',
+      data: xData,
-        data: [],
+      axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
-        axisLabel: {
+      axisLine: { lineStyle: { color: '#1a508b' } },
-          fontSize: 11,
+      boundaryGap: true
-          interval: 0,
+    }],
-          color: '#b4c7e7'
-        },
-        axisLine: { lineStyle: { color: '#1a508b' } },
-        boundaryGap: true
-      }
-    ],
     yAxis: [
       {
         type: 'value',
@@ -94,7 +111,7 @@ function initChart() {
       },
       {
         type: 'value',
-        name: '占比 (%)',
+        name: '比率 (%)',
         nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
         axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
         axisLine: { lineStyle: { color: '#1a508b' } },
@@ -109,142 +126,82 @@ function initChart() {
         name: '收入',
         type: 'bar',
         yAxisIndex: 0,
-        data: [],
+        data: index01Wan,
-        barWidth: '12%',
+        barWidth: '10%',
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
-            { offset: 0, color: '#85E868' },
+            { offset:0, color:'#85E868' },
-            { offset: 1, color: '#67C23A' }
+            { offset:1, color:'#67C23A' }
           ]),
-          borderRadius: [8, 8, 0, 0]
+          borderRadius: [8,8,0,0]
         },
-        label: {
+        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
-          show: true,
-          position: 'top',
-          fontSize: 10,
-          color: '#fff',
-          formatter: '{c}'
-        }
       },
       {
         name: '支出',
         type: 'bar',
         yAxisIndex: 0,
-        data: [],
+        data: index02Wan,
-        barWidth: '12%',
+        barWidth: '10%',
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
-            { offset: 0, color: '#FF8A8A' },
+            { offset:0, color:'#FF8A8A' },
-            { offset: 1, color: '#F56C6C' }
+            { offset:1, color:'#F56C6C' }
           ]),
-          borderRadius: [8, 8, 0, 0]
+          borderRadius: [8,8,0,0]
         },
-        label: {
+        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
-          show: true,
+      },
-          position: 'top',
+      {
-          fontSize: 10,
+        name: '利润率',
-          color: '#fff',
+        type: 'line',
-          formatter: '{c}'
+        yAxisIndex: 1,
+        data: index03,
+        smooth: true,
+        lineStyle: { width:1.5, color:'#FCC367' },
+        symbol: 'circle',
+        symbolSize: 5,
+        label: { show:true, position:'outside', fontSize:10, color:'#FCC367', formatter:'{c}', offset:[0,-5] },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset:0, color:'rgba(252,195,103,0.3)' },
+            { offset:1, color:'rgba(252,195,103,0)' }
+          ])
         }
       },
       {
         name: '占比',
         type: 'line',
         yAxisIndex: 1,
-        data: [],
+        data: index04,
         smooth: true,
-        lineStyle: { width: 1.5, color: '#409EFF' },
+        lineStyle: { width:1.5, color:'#409EFF' },
         symbol: 'circle',
         symbolSize: 5,
-        label: {
+        label: { show:true, position:'outside', fontSize:10, color:'#409EFF', formatter:'{c}', offset:[0,-5] },
-          show: true,
-          position: 'outside',
-          fontSize: 10,
-          color: '#409EFF',
-          formatter: '{c}',
-          offset: [0, -5]
-        },
         areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
-            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+            { offset:0, color:'rgba(64,158,255,0.3)' },
-            { offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
+            { offset:1, color:'rgba(64,158,255,0)' }
           ])
-        },
-        emphasis: {
-          lineStyle: { width: 2 },
-          symbolSize: 7
         }
       }
     ]
   }
 
-  if (vList.value.length > 0) {
+  chartInstance.setOption(option, true)
-    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(
+onMounted(async () => {
-  () => props.formParams,
+  await getList()
-  () => {
-    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.dispose()
+  chartInstance = null
-    chartInstance = null
-  }
 })
 </script>
 
@@ -256,7 +213,6 @@ onUnmounted(() => {
   flex-direction: column;
   overflow: hidden;
 }
-
 .chart-card-header {
   height: 40px;
   line-height: 40px;
@@ -266,14 +222,12 @@ onUnmounted(() => {
   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%;

screen-vue/src/views/desktop/screen/Erp/components/ChartV06.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="chart-card">
     <div class="chart-card-header">
-      <span class="chart-card-title">支出排名分析</span>
+      <span class="chart-card-title">月度收支分析</span>
     </div>
-    <div class="rank-chart-container" ref="chartRef"></div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'
 import { getItemInfoList } from '@/api/bizApi'
 
@@ -17,7 +17,7 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   }
-})
+});
 
 const vList = ref([])
 const chartRef = ref(null)
@@ -28,7 +28,7 @@ async function getList() {
   try {
     const params = {
       ...props.formParams,
-      itemCode: 'ERP_YEARRANK_Y001',
+      itemCode: 'ERP_YEARPSAV_M001',
     }
     const res = await getItemInfoList(params)
     vList.value = res || []
@@ -38,119 +38,236 @@ async function getList() {
   }
 }
 
-const initRankChart = () => {
+function initChart() {
   const el = chartRef.value
   if (!el) return
 
-  if (chartInstance) {
+  if (!chartInstance) {
-    chartInstance.dispose()
+    chartInstance = echarts.init(el)
   }
 
-  chartInstance = echarts.init(el)
+  const baseOption = {
-
-  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' },
+      axisPointer: { type: 'cross' },
       backgroundColor: 'rgba(145, 200, 255, 0.9)',
       borderColor: '#409EFF',
       borderWidth: 1,
       textStyle: { color: '#0a3b70' },
       padding: [8, 12],
-      borderRadius: 6,
+      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
+      top: '10',
+      left: 'center',
+      textStyle: { fontSize: 12, color: '#e0e6ff' },
+      data: ['收入', '支出', '利润率', '净利润']
     },
     grid: {
       left: '5%',
-      right: '15%',
+      right: '5%',
       bottom: '10%',
       top: '15%',
       containLabel: true
     },
     xAxis: [
       {
-        type: 'value',
+        type: 'category',
-        axisLabel: { fontSize: 11, color: '#b4c7e7' },
+        data: [],
+        axisLabel: {
+          fontSize: 11,
+          interval: 0,
+          color: '#b4c7e7'
+        },
         axisLine: { lineStyle: { color: '#1a508b' } },
-        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+        boundaryGap: true
       }
     ],
     yAxis: [
       {
-        type: 'category',
+        type: 'value',
-        data: yData,
+        name: '金额 (万元)',
-        axisLabel: { fontSize: 11, color: '#b4c7e7' },
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
         axisLine: { lineStyle: { color: '#1a508b' } },
-        inverse: true
+        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: '支出',
+        name: '收入',
         type: 'bar',
+        yAxisIndex: 0,
+        data: [],
         barWidth: '12%',
-        data: valueData,
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#409EFF' },
+            { offset: 0, color: '#85E868' },
-            { offset: 0, color: '#409EFF' },
+            { offset: 1, color: '#67C23A' }
-            { offset: 1, color: '#1890FF' }
+          ]),
-          ])
+          borderRadius: [8, 8, 0, 0]
         },
         label: {
           show: true,
-          position: 'right',
+          position: 'top',
           fontSize: 10,
-          color: '#e0e6ff',
+          color: '#fff',
-          formatter: params => `${params.value} 万元 (${percentData[params.dataIndex]}%)`
+          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
         }
       }
     ]
   }
 
-  chartInstance.setOption(option)
+  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, () => {
+watch(
-  getList()
+  () => props.formParams,
-}, { deep: true, immediate: true })
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
 
 watch(vList, () => {
-  initRankChart()
+  nextTick(() => initChart())
 }, { deep: true })
 
 onMounted(() => {
-  initRankChart()
+  initChart()
   window.addEventListener('resize', resizeHandler)
 })
 
@@ -189,16 +306,9 @@ onUnmounted(() => {
   letter-spacing: 0.5px;
 }
 
-.rank-chart-container {
+.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;
-}
 </style>

screen-vue/src/views/desktop/screen/Erp/components/ChartV07.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="chart-card">
     <div class="chart-card-header">
-      <span class="chart-card-title">环比收支分析</span>
+      <span class="chart-card-title">支出排名分析</span>
     </div>
-    <div class="bar-line-chart-container" ref="chartRef"></div>
+    <div class="rank-chart-container" ref="chartRef"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import * as echarts from 'echarts'
 import { getItemInfoList } from '@/api/bizApi'
 
@@ -17,7 +17,7 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   }
-});
+})
 
 const vList = ref([])
 const chartRef = ref(null)
@@ -28,7 +28,7 @@ async function getList() {
   try {
     const params = {
       ...props.formParams,
-      itemCode: 'ERP_YEARDATA_M001',
+      itemCode: 'ERP_YEARRANK_Y001',
     }
     const res = await getItemInfoList(params)
     vList.value = res || []
@@ -38,325 +38,119 @@ async function getList() {
   }
 }
 
-function initChart() {
+const initRankChart = () => {
   const el = chartRef.value
   if (!el) return
 
   if (chartInstance) {
     chartInstance.dispose()
   }
+
   chartInstance = echarts.init(el)
 
-  const baseOption = {
+  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: 'cross' },
+      axisPointer: { type: 'shadow' },
       backgroundColor: 'rgba(145, 200, 255, 0.9)',
       borderColor: '#409EFF',
       borderWidth: 1,
       textStyle: { color: '#0a3b70' },
       padding: [8, 12],
-      borderRadius: 6
+      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: {
-      top: '10',
+      show: false
-      left: 'center',
-      textStyle: { fontSize: 12, color: '#e0e6ff' },
-      data: ['收入', '支出', '占比', '上月收入', '上月支出', '收入环比', '支出环比', '本月净利润']
     },
     grid: {
       left: '5%',
-      right: '5%',
+      right: '15%',
       bottom: '10%',
       top: '15%',
       containLabel: true
     },
     xAxis: [
       {
-        type: 'category',
+        type: 'value',
-        data: [],
+        axisLabel: { fontSize: 11, color: '#b4c7e7' },
-        axisLabel: {
-          fontSize: 11,
-          interval: 0,
-          color: '#b4c7e7'
-        },
         axisLine: { lineStyle: { color: '#1a508b' } },
-        boundaryGap: true
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
       }
     ],
     yAxis: [
       {
-        type: 'value',
+        type: 'category',
-        name: '金额 (万元)',
+        data: yData,
-        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { fontSize: 11, color: '#b4c7e7' },
-        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
         axisLine: { lineStyle: { color: '#1a508b' } },
-        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+        inverse: true
-      },
-      {
-        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%',
+        data: valueData,
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#FF9D28' },
+            { offset: 0, color: '#409EFF' },
-            { offset: 1, color: '#FAAD14' }
+            { offset: 0, color: '#409EFF' },
-          ]),
+            { offset: 1, color: '#1890FF' }
-          borderRadius: [8, 8, 0, 0]
+          ])
         },
         label: {
           show: true,
-          position: 'top',
+          position: 'right',
           fontSize: 10,
-          color: '#fff',
+          color: '#e0e6ff',
-          formatter: '{c}'
+          formatter: params => `${params.value} 万元 (${percentData[params.dataIndex]}%)`
         }
       }
     ]
   }
 
-  if (vList.value.length > 0) {
+  chartInstance.setOption(option)
-    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]
-      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)
-    })
-
-    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">${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
-  }
-
-  chartInstance.setOption(baseOption, true)
 }
 
-watch(
+watch(() => props.formParams, () => {
-  () => props.formParams,
+  getList()
-  () => {
+}, { deep: true, immediate: true })
-    getList()
-  },
-  { deep: true, immediate: true }
-)
 
 watch(vList, () => {
-  nextTick(() => initChart())
+  initRankChart()
 }, { deep: true })
 
 onMounted(() => {
-  initChart()
+  initRankChart()
   window.addEventListener('resize', resizeHandler)
 })
 
@@ -395,7 +189,7 @@ onUnmounted(() => {
   letter-spacing: 0.5px;
 }
 
-.bar-line-chart-container {
+.rank-chart-container {
   flex: 1;
   width: 100%;
   height: calc(100% - 40px);
@@ -406,7 +200,5 @@ onUnmounted(() => {
   border-color: #409EFF !important;
   color: #0a3b70 !important;
   border-radius: 6px !important;
-  white-space: nowrap !important;
-  max-width: none !important;
 }
 </style>

screen-vue/src/views/desktop/screen/Erp/components/ChartV08.vue

@@ -1,29 +1,34 @@
 <template>
   <div class="chart-card">
     <div class="chart-card-header">
-      <span class="chart-card-title">年度收支分析</span>
+      <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 } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'
 import { getItemInfoList } from '@/api/bizApi'
 
+const props = defineProps({
+  formParams: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
 const vList = ref([])
 const chartRef = ref(null)
 let chartInstance = null
-
+const resizeHandler = () => chartInstance?.resize()
-const resizeHandler = () => {
-  chartInstance?.resize()
-}
 
 async function getList() {
   try {
     const params = {
-      itemCode: 'ERP_YEARPMOM_M001',
+      ...props.formParams,
+      itemCode: 'ERP_YEARQUAR_Y001',
     }
     const res = await getItemInfoList(params)
     vList.value = res || []
@@ -41,16 +46,7 @@ function initChart() {
     chartInstance = echarts.init(el)
   }
 
-  const xData = vList.value.map(item => item.xaxis || '')
+  const baseOption = {
-  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 index04 = 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 option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: { type: 'cross' },
@@ -59,32 +55,13 @@ function initChart() {
       borderWidth: 1,
       textStyle: { color: '#0a3b70' },
       padding: [8, 12],
-      borderRadius: 6,
+      borderRadius: 6
-      formatter: params => {
-        const idx = params[0].dataIndex
-        return `
-<div style="text-align:center;font-weight:bold;margin-bottom:6px">${params[0].axisValue}</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">${index01Yuan[idx]}</td>
-    <td style="border:1px solid #409EFF;padding:4px">${index02Yuan[idx]}</td>
-    <td style="border:1px solid #409EFF;padding:4px">${index03[idx]}</td>
-    <td style="border:1px solid #409EFF;padding:4px">${index04[idx]}</td>
-  </tr>
-</table>`
-      }
     },
     legend: {
       top: '10',
       left: 'center',
       textStyle: { fontSize: 12, color: '#e0e6ff' },
-      data: ['收入', '支出', '利润率', '占比']
+      data: ['收入', '支出', '占比']
     },
     grid: {
       left: '5%',
@@ -93,13 +70,19 @@ function initChart() {
       top: '15%',
       containLabel: true
     },
-    xAxis: [{
+    xAxis: [
-      type: 'category',
+      {
-      data: xData,
+        type: 'category',
-      axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
+        data: [],
-      axisLine: { lineStyle: { color: '#1a508b' } },
+        axisLabel: {
-      boundaryGap: true
+          fontSize: 11,
-    }],
+          interval: 0,
+          color: '#b4c7e7'
+        },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        boundaryGap: true
+      }
+    ],
     yAxis: [
       {
         type: 'value',
@@ -111,7 +94,7 @@ function initChart() {
       },
       {
         type: 'value',
-        name: '比率 (%)',
+        name: '占比 (%)',
         nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
         axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
         axisLine: { lineStyle: { color: '#1a508b' } },
@@ -126,82 +109,142 @@ function initChart() {
         name: '收入',
         type: 'bar',
         yAxisIndex: 0,
-        data: index01Wan,
+        data: [],
-        barWidth: '10%',
+        barWidth: '12%',
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset:0, color:'#85E868' },
+            { offset: 0, color: '#85E868' },
-            { offset:1, color:'#67C23A' }
+            { offset: 1, color: '#67C23A' }
           ]),
-          borderRadius: [8,8,0,0]
+          borderRadius: [8, 8, 0, 0]
         },
-        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#fff',
+          formatter: '{c}'
+        }
       },
       {
         name: '支出',
         type: 'bar',
         yAxisIndex: 0,
-        data: index02Wan,
+        data: [],
-        barWidth: '10%',
+        barWidth: '12%',
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset:0, color:'#FF8A8A' },
+            { offset: 0, color: '#FF8A8A' },
-            { offset:1, color:'#F56C6C' }
+            { offset: 1, color: '#F56C6C' }
           ]),
-          borderRadius: [8,8,0,0]
+          borderRadius: [8, 8, 0, 0]
         },
-        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
+        label: {
-      },
+          show: true,
-      {
+          position: 'top',
-        name: '利润率',
+          fontSize: 10,
-        type: 'line',
+          color: '#fff',
-        yAxisIndex: 1,
+          formatter: '{c}'
-        data: index03,
-        smooth: true,
-        lineStyle: { width:1.5, color:'#FCC367' },
-        symbol: 'circle',
-        symbolSize: 5,
-        label: { show:true, position:'outside', fontSize:10, color:'#FCC367', formatter:'{c}', offset:[0,-5] },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
-            { offset:0, color:'rgba(252,195,103,0.3)' },
-            { offset:1, color:'rgba(252,195,103,0)' }
-          ])
         }
       },
       {
         name: '占比',
         type: 'line',
         yAxisIndex: 1,
-        data: index04,
+        data: [],
         smooth: true,
-        lineStyle: { width:1.5, color:'#409EFF' },
+        lineStyle: { width: 1.5, color: '#409EFF' },
         symbol: 'circle',
         symbolSize: 5,
-        label: { show:true, position:'outside', fontSize:10, color:'#409EFF', formatter:'{c}', offset:[0,-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,[
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset:0, color:'rgba(64,158,255,0.3)' },
+            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
-            { offset:1, color:'rgba(64,158,255,0)' }
+            { offset: 1, color: 'rgba(64, 158, 255, 0.0)' }
           ])
+        },
+        emphasis: {
+          lineStyle: { width: 2 },
+          symbolSize: 7
         }
       }
     ]
   }
 
-  chartInstance.setOption(option, true)
+  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)
 }
 
-onMounted(async () => {
+watch(
-  await getList()
+  () => props.formParams,
+  () => {
+    getList()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(vList, () => {
+  nextTick(() => initChart())
+}, { deep: true })
+
+onMounted(() => {
   initChart()
   window.addEventListener('resize', resizeHandler)
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', resizeHandler)
-  chartInstance?.dispose()
+  if (chartInstance) {
-  chartInstance = null
+    chartInstance.dispose()
+    chartInstance = null
+  }
 })
 </script>
 
@@ -213,6 +256,7 @@ onUnmounted(() => {
   flex-direction: column;
   overflow: hidden;
 }
+
 .chart-card-header {
   height: 40px;
   line-height: 40px;
@@ -222,12 +266,14 @@ onUnmounted(() => {
   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%;

screen-vue/src/views/desktop/screen/Erp/index.vue

@@ -10,12 +10,12 @@
     <div class="erp-section erp-upper-section">
       <div class="erp-col erp-col-1-3">
         <div class="erp-card">
-          
+          <ChartV01 :formParams="props.formParams" />
         </div>
       </div>
       <div class="erp-col erp-col-1-3">
         <div class="erp-card">
-          <ChartV08 />
+          <ChartV02 :formParams="props.formParams" />
         </div>
       </div>
       <div class="erp-col erp-col-1-3">
@@ -42,7 +42,7 @@
       </div>
       <div class="erp-col erp-col-1-2">
         <div class="erp-card">
-          <ChartV01 :formParams="props.formParams" />
+          <ChartV06 :formParams="props.formParams" />
         </div>
       </div>
     </div>
@@ -52,19 +52,19 @@
         <div class="erp-inner-layout">
           <div class="erp-col erp-col-1-2">
             <div class="erp-card">
-              <ChartV06 :formParams="props.formParams" />
+              <ChartV07 :formParams="props.formParams" />
             </div>
           </div>
           <div class="erp-col erp-col-1-2">
             <div class="erp-card">
-              <ChartV02 :formParams="props.formParams" />
+              <ChartV08 :formParams="props.formParams" />
             </div>
           </div>
         </div>
       </div>
       <div class="erp-col erp-col-1-2">
         <div class="erp-card">
-          <ChartV07 :formParams="props.formParams" />
+          <ChartV09 :formParams="props.formParams" />
         </div>
       </div>
     </div>
@@ -81,6 +81,7 @@ import ChartV05 from './components/ChartV05.vue';
 import ChartV06 from './components/ChartV06.vue';
 import ChartV07 from './components/ChartV07.vue';
 import ChartV08 from './components/ChartV08.vue';
+import ChartV09 from './components/ChartV09.vue';
 
 const props = defineProps({
   formParams: {