初始版本

src/pages/Aanalyse/A1resStat/data.ts

@@ -1,7 +1,12 @@
 import * as echarts from 'echarts'
 
 // 生成柱状图
-export const initEchZhuFu = (data: any[], dom: any, title: string, back: (id: string) => void) => {
+export const initEchZhuFu = (
+  data: any[],
+  dom: any,
+  title: string,
+  back: (id: string, name: string, num: string) => void
+) => {
   if (!dom) return
 
   // 销毁已存在的实例
@@ -13,7 +18,13 @@ export const initEchZhuFu = (data: any[], dom: any, title: string, back: (id: st
   const myChart = echarts.init(dom)
 
   // 根据类型获取数据
-  const chartData = data.map(v => ({ id: v.id, value: v.pcs || 0, name: (v.num || '') + v.name }))
+  const chartData = data.map(v => ({
+    id: v.id,
+    value: v.pcs || 0,
+    name: (v.num || '') + v.name,
+    num: v.num || '',
+    rawName: v.name
+  }))
   const total = chartData.reduce((sum, item) => sum + item.value, 0)
 
   const option = {
@@ -101,15 +112,19 @@ export const initEchZhuFu = (data: any[], dom: any, title: string, back: (id: st
 
   // 点击柱子事件
   myChart.on('click', (params: any) => {
-    console.log('点击柱子信息：', {
-      分类名称: params.name,
-      数量: params.value,
-      占比: ((params.value / total) * 100).toFixed(1) + '%',
-      系列名称: params.seriesName,
-      数据索引: params.dataIndex
-    })
-    // 把id传出去
-    // back()
+    const clickedItem = chartData[params.dataIndex]
+    // console.log('点击柱子信息：', {
+    //   id: clickedItem.id,
+    //   分类名称: params.name,
+    //   数量: params.value,
+    //   占比: ((params.value / total) * 100).toFixed(1) + '%',
+    //   系列名称: params.seriesName,
+    //   数据索引: params.dataIndex
+    // })
+    // 把id、name、num传出去
+    if (clickedItem && clickedItem.id) {
+      back(clickedItem.id, clickedItem.rawName, clickedItem.num)
+    }
   })
 
   // 自适应

src/pages/Aanalyse/A1resStat/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { Button, Select } from 'antd'
+import { Button, Modal, Select } from 'antd'
 import dayjs from 'dayjs'
 import { initEchBingFu, initEchZhuFu } from './data'
 
@@ -84,9 +84,22 @@ function A1resStat() {
   useEffect(() => {
     if (zhuData.list && zhuData.list.length) {
       zhuData.list.forEach((v, i) => {
-        initEchZhuFu(v.children, document.querySelector(`#echZhu${i + 1}`), v.name, id => {
-          setZhuSonId(id)
-        })
+        initEchZhuFu(
+          v.children,
+          document.querySelector(`#echZhu${i + 1}`),
+          v.name,
+          (id, name, num) => {
+            setModalTitle((num || '') + (name || ''))
+            // 查找对应的children数据
+            const item = v.children?.find((child: any) => child.id === id)
+            if (item && item.children) {
+              setModalData(item.children)
+            } else {
+              setModalData([])
+            }
+            setModalVisible(true)
+          }
+        )
       })
     }
   }, [zhuData])
@@ -380,7 +393,37 @@ function A1resStat() {
   }, [allNum, time, yearNum, zhuData, bingData, kuId1, kuId2, kuList])
 
   // 点击柱子打开弹窗
-  const [zhuSonId, setZhuSonId] = useState('')
+  const [modalVisible, setModalVisible] = useState(false)
+  const [modalTitle, setModalTitle] = useState('')
+  const [modalData, setModalData] = useState<any[]>([])
+
+  // 弹窗柱状图渲染
+  const modalChartRef = useRef<any>(null)
+
+  useEffect(() => {
+    if (modalVisible && modalData.length > 0) {
+      // 延迟渲染确保DOM已挂载
+      setTimeout(() => {
+        const dom = document.querySelector('#echZhuModal')
+        if (dom) {
+          // 销毁之前的实例
+          if (modalChartRef.current) {
+            modalChartRef.current.dispose()
+          }
+          modalChartRef.current = initEchZhuFu(modalData, dom, modalTitle, () => {})
+        }
+      }, 100)
+    }
+  }, [modalVisible, modalData, modalTitle])
+
+  // 关闭弹窗时销毁图表实例
+  const handleModalClose = useCallback(() => {
+    if (modalChartRef.current) {
+      modalChartRef.current.dispose()
+      modalChartRef.current = null
+    }
+    setModalVisible(false)
+  }, [])
 
   return (
     <div className={styles.A1resStat}>
@@ -517,6 +560,21 @@ function A1resStat() {
           )}
         </div>
       </div>
+
+      {/* 弹窗：显示子数据柱状图 */}
+      <Modal
+        title={modalTitle}
+        open={modalVisible}
+        onCancel={handleModalClose}
+        footer={null}
+        width={800}
+        centered
+      >
+        <div id='echZhuModal' style={{ width: '100%', height: 400 }}></div>
+        {modalData.length === 0 && (
+          <div style={{ textAlign: 'center', padding: '40px 0', color: '#999' }}>暂无子数据</div>
+        )}
+      </Modal>
     </div>
   )
 }