fix(图表): 修复分组堆叠柱状图-累加-联动时点击绿色区域后右侧会增加一个维度的问题，优化图表交互逻辑，增强点击事件处理

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

@@ -81,10 +81,18 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
         title: false
       }
     },
+    state: {
+      selected: {
+        stroke: 'black',
+        lineWidth: 1
+      },
+      unselected: { opacity: 0.5 }
+    },
     interaction: {
       elementHighlight: {
         background: true,
-        region: true
+        region: true,
+        single: true
       },
       elementSelect: {
         background: true,
@@ -124,6 +132,27 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
     handleChartDashboardHidden(chart, options)
     newChart.options(options)
     newChart.on('interval:click', action)
+    const { functionCfg } = parseJson(chart.senior)
+    newChart.on('plot:click', e => {
+      // 点击背景事件，开启滑块时不触发，因为启动滑块后，通过 xy 获取点击位置对应的数据项不准确
+      if (e.target.className === 'element-background' && !functionCfg?.sliderShow) {
+        const point = { x: e.x, y: e.y }
+        const snapRecords = newChart.getDataByXY(point, { shared: true })
+        if (snapRecords && snapRecords.length > 0) {
+          newChart.emit('element:unselect', {})
+          newChart.emit('interval:click', { data: { data: { ...snapRecords[0] } } })
+          newChart.emit('element:select', { data: { data: snapRecords } })
+        }
+      }
+      // 仅当点击在图形上时触发
+      if (e.target.className === 'element' && e.target.__data__?.data) {
+        newChart.emit('element:unselect', {})
+        const targetData = e.target.__data__?.data
+        const data = { data: { data: targetData } }
+        newChart.emit('interval:click', data)
+        newChart.emit('element:select', { data: { data: [{ ...targetData }] } })
+      }
+    })
     new G2TooltipCarousel(newChart, chart, data).start()
     extremumEvt(newChart, chart, options.children[0], container, scale, this.name === 'bar')
     return newChart

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -137,6 +137,7 @@ const viewTrack = ref(null)
 const clearLinkage = () => {
   linkageActiveHistory.value = false
   try {
+    myChart?.emit('element:unselect', {})
     myChart?.setState('active', () => true, false)
     myChart?.setState('inactive', () => true, false)
     myChart?.setState('selected', () => true, false)
@@ -146,10 +147,6 @@ const clearLinkage = () => {
 }
 const reDrawView = () => {
   linkageActiveHistory.value = false
-  const slider = myChart?.chart?.getController('slider')
-  if (!slider) {
-    myChart?.render()
-  }
 }
 const linkageActivePre = () => {
   if (linkageActiveHistory.value) {
@@ -161,30 +158,34 @@ const linkageActivePre = () => {
 }
 const linkageActive = () => {
   linkageActiveHistory.value = true
-  myChart?.setState('active', () => true, false)
-  myChart?.setState('inactive', () => true, false)
-  myChart?.setState('selected', () => true, false)
-  myChart?.setState('active', param => {
-    if (Array.isArray(param)) {
-      return false
-    } else {
-      return checkSelected(param)
-    }
-  })
-  myChart?.setState('inactive', param => {
-    if (Array.isArray(param)) {
-      return false
-    } else {
-      return !checkSelected(param)
-    }
-  })
-  myChart?.setState('selected', param => {
-    if (Array.isArray(param)) {
-      return false
-    } else {
-      return checkSelected(param)
-    }
-  })
+  try {
+    myChart?.setState('active', () => true, false)
+    myChart?.setState('inactive', () => true, false)
+    myChart?.setState('selected', () => true, false)
+    myChart?.setState('active', param => {
+      if (Array.isArray(param)) {
+        return false
+      } else {
+        return checkSelected(param)
+      }
+    })
+    myChart?.setState('inactive', param => {
+      if (Array.isArray(param)) {
+        return false
+      } else {
+        return !checkSelected(param)
+      }
+    })
+    myChart?.setState('selected', param => {
+      if (Array.isArray(param)) {
+        return false
+      } else {
+        return checkSelected(param)
+      }
+    })
+  } catch (err) {
+    console.warn('linkageActive error')
+  }
 }
 const checkSelected = param => {
   // 获取当前视图的所有联动字段ID