feat(图表): 基础条形图/柱状图支持点击阴影部分执行下钻、联动、跳转 #16489

core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts

@@ -37,6 +37,7 @@ import {
 } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
 import { Group } from '@antv/g-canvas'
+import { getItemsOfView } from '@antv/g2/lib/interaction/action/active-region'
 
 const { t } = useI18n()
 const DEFAULT_DATA: any[] = []
@@ -101,6 +102,36 @@ export class Bar extends G2PlotChartView<ColumnOptions, Column> {
     const { Column: ColumnClass } = await import('@antv/g2plot/esm/plots/column')
     newChart = new ColumnClass(container, options)
     newChart.on('interval:click', action)
+    // 只处理柱状图，分组和堆叠的阴影部分没有子维度信息
+    if (this.name === 'bar' && options.tooltip) {
+      newChart.on('plot:click', e => {
+        if (e.target?.cfg?.renderer !== 'canvas') {
+          return
+        }
+        const activeRegion = e.view.backgroundGroup.cfg.children.find(
+          i => i.cfg.name === 'active-region'
+        )
+        if (activeRegion?.cfg.visible) {
+          const items = getItemsOfView(
+            e.view,
+            { x: e.x, y: e.y },
+            e.view.getController('tooltip').getTooltipCfg()
+          )
+          if (items?.length) {
+            const datum = items[0].data
+            if (datum && datum.field) {
+              action({
+                x: e.x,
+                y: e.y,
+                data: {
+                  data: datum
+                }
+              })
+            }
+          }
+        }
+      })
+    }
     extremumEvt(newChart, chart, options, container)
     configPlotTooltipEvent(chart, newChart)
     return newChart

core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts

@@ -35,6 +35,7 @@ import {
   DEFAULT_LEGEND_STYLE
 } from '@/views/chart/components/editor/util/chart'
 import { Group } from '@antv/g-canvas'
+import { getItemsOfView } from '@antv/g2/lib/interaction/action/active-region'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -119,6 +120,36 @@ export class HorizontalBar extends G2PlotChartView<BarOptions, Bar> {
         })
       })
     }
+    // 只处理条形图，分组和堆叠的阴影部分没有子维度信息
+    if (this.name === 'bar-horizontal' && options.tooltip) {
+      newChart.on('plot:click', e => {
+        if (e.target?.cfg?.renderer !== 'canvas') {
+          return
+        }
+        const activeRegion = e.view.backgroundGroup.cfg.children.find(
+          i => i.cfg.name === 'active-region'
+        )
+        if (activeRegion?.cfg.visible) {
+          const items = getItemsOfView(
+            e.view,
+            { x: e.x, y: e.y },
+            e.view.getController('tooltip').getTooltipCfg()
+          )
+          if (items?.length) {
+            const datum = items[0].data
+            if (datum && datum.field) {
+              action({
+                x: e.x,
+                y: e.y,
+                data: {
+                  data: datum
+                }
+              })
+            }
+          }
+        }
+      })
+    }
     configPlotTooltipEvent(chart, newChart)
     configAxisLabelLengthLimit(chart, newChart)
     return newChart