feat(connected-area): 联通区域支持样式配置 (antvis#2667)

- [x] demo & docs

docs/common/connected-area.en.md

@@ -1,7 +1,18 @@
-Applicable to stacked bar charts and stacked bar charts, the link area component provides visual assistant identification by drawing the link area of the same field, which is convenient for data comparison.
+Applicable to stacked bar charts and stacked bar charts, the link area component provides visual assistant identification by drawing the link area of the same field, which is convenient for data comparison. (Attention：could not use with **columnBackground** )
 
 <description>**optional** _object_ | _false_</description>
 
 | Properties | Type             | Required     | Default ｜ Description |
 | ---------- | ---------------- | ------------ | ---------------------- |
 | trigger    | 'hover'、'click' | No ｜'hover' | Trigger method         |
+| style | _ConnectedAreaStyleCfg_ |  | No ｜ | StyleCfg of connectedArea          |
+
+Types of **_ConnectedAreaStyleCfg_** are as follows:
+
+```sign
+type ConnectedAreaStyleCfg = ShapeAttrs | ((oldStyle: ShapeAttrs, element: Element) => ShapeAttrs);
+```
+
+**Examples:**
+
+<playground path="column/stacked/demo/connect-area.ts" rid="connectedArea"></playground>

docs/common/connected-area.zh.md

@@ -1,7 +1,18 @@
-适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。
+适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。（注意：不能和 **columnBackground** 同时使用）
 
 <description>**optional** _object_ | _false_</description>
 
 | 配置项  | 类型             | 是否必选     | 默认值｜ 功能描述 |
 | ------- | ---------------- | ------------ | ----------------- |
-| trigger | 'hover'、'click' | 否 ｜'hover' | 触发方式          |
+| trigger | _'hover'、'click'_ | 否 ｜'hover' | 触发方式          |
+| style | _ConnectedAreaStyleCfg_ |  | 否 ｜ | 联通区域的样式配置          |
+
+**_ConnectedAreaStyleCfg_** 类型定义如下：
+
+```sign
+type ConnectedAreaStyleCfg = ShapeAttrs | ((oldStyle: ShapeAttrs, element: Element) => ShapeAttrs);
+```
+
+**图表示例：**
+
+<playground path="column/stacked/demo/connect-area.ts" rid="connectedArea"></playground>

examples/column/stacked/demo/connect-area.ts

@@ -0,0 +1,25 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const stackedColumnPlot = new Column('container', {
+      data,
+      isStack: true,
+      xField: 'year',
+      yField: 'value',
+      seriesField: 'type',
+      label: {
+        // 可手动配置 label 数据标签位置
+        position: 'middle', // 'top', 'bottom', 'middle'
+      },
+      interactions: [{ type: 'active-region', enable: false }],
+      connectedArea: {
+        style: (oldStyle, element) => {
+          return { fill: 'rgba(0,0,0,0.25)', stroke: oldStyle.fill, lineWidth: 0.5 };
+        },
+      },
+    });
+
+    stackedColumnPlot.render();
+  });

examples/column/stacked/demo/meta.json

@@ -12,6 +12,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KLJB0t7S9W/93ca0482-9d1d-42e9-b99c-c70d87517888.png"
     },
+    {
+      "filename": "connect-area.ts",
+      "title": {
+        "zh": "自定义联通区域样式柱状图",
+        "en": "Stacked column plot with connectedArea"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KLJB0t7S9W/93ca0482-9d1d-42e9-b99c-c70d87517888.png"
+    },
     {
       "filename": "column-background.ts",
       "title": {

src/adaptor/connected-area.ts

@@ -1,9 +1,11 @@
-import { registerInteraction } from '@antv/g2';
+import { registerInteraction, ShapeAttrs, Element } from '@antv/g2';
 import { Params } from '../core/adaptor';
 
 export interface ConnectedAreaOptions {
   /** 触发方式, 默认 hover */
   trigger?: 'hover' | 'click';
+  /** 自定义样式 */
+  style?: ShapeAttrs | ((style: ShapeAttrs, element: Element) => ShapeAttrs);
 }
 
 /** 联通区域组件：使用于堆叠柱形图、堆叠条形图 */
@@ -16,14 +18,34 @@ const INTERACTION_MAP = {
   click: '__interval-connected-area-click__',
 };
 
-/** hover 触发的连通区域交互 */
-registerInteraction(INTERACTION_MAP.hover, {
-  start: [
+const getStartStages = (trigger: string, style?: ConnectedAreaOptions['style']) => {
+  if (trigger === 'hover') {
+    return [
+      {
+        trigger: `interval:mouseenter`,
+        action: ['element-highlight-by-color:highlight', 'element-link-by-color:link'],
+        arg: [null, { style }],
+      },
+    ];
+  }
+  return [
     {
-      trigger: `interval:mouseenter`,
-      action: ['element-highlight-by-color:highlight', 'element-link-by-color:link'],
+      trigger: `interval:click`,
+      action: [
+        'element-highlight-by-color:clear',
+        'element-highlight-by-color:highlight',
+        'element-link-by-color:clear',
+        'element-link-by-color:unlink',
+        'element-link-by-color:link',
+      ],
+      arg: [null, null, null, null, { style }],
     },
-  ],
+  ];
+};
+
+/** hover 触发的连通区域交互 */
+registerInteraction(INTERACTION_MAP.hover, {
+  start: getStartStages(INTERACTION_MAP.hover),
   end: [
     {
       trigger: 'interval:mouseleave',
@@ -34,18 +56,7 @@ registerInteraction(INTERACTION_MAP.hover, {
 
 /** click 触发的联通区域交互 */
 registerInteraction(INTERACTION_MAP.click, {
-  start: [
-    {
-      trigger: `interval:click`,
-      action: [
-        'element-highlight-by-color:clear',
-        'element-highlight-by-color:highlight',
-        'element-link-by-color:clear',
-        'element-link-by-color:unlink',
-        'element-link-by-color:link',
-      ],
-    },
-  ],
+  start: getStartStages(INTERACTION_MAP.click),
   end: [
     {
       trigger: 'document:mousedown',
@@ -71,7 +82,9 @@ export function connectedArea<O extends OptionWithConnectedArea>(disable = false
     if (!disable && connectedArea) {
       const trigger = connectedArea.trigger || 'hover';
       clear();
-      chart.interaction(INTERACTION_MAP[trigger]);
+      chart.interaction(INTERACTION_MAP[trigger], {
+        start: getStartStages(trigger, connectedArea.style),
+      });
     } else {
       clear();
     }