feat: 增加交互关闭配置 & demo 走查

__tests__/unit/core/index-spec.ts

@@ -117,18 +117,18 @@ describe('core', () => {
     });
   });
 
-  it('state', async () => {
-    const pie = new Pie(createDiv('饼图状态'), {
-      width: 400,
-      height: 400,
-      data: salesByArea,
-      angleField: 'sales',
-      colorField: 'area',
-      radius: 0.8,
-      autoFit: false,
-      interactions: [{ type: 'element-selected' }],
-    });
+  const pie = new Pie(createDiv('饼图状态'), {
+    width: 400,
+    height: 400,
+    data: salesByArea,
+    angleField: 'sales',
+    colorField: 'area',
+    radius: 0.8,
+    autoFit: false,
+    interactions: [{ type: 'element-selected' }],
+  });
 
+  it('state', async () => {
     pie.render();
 
     // 注意，如果 autoFit 会触发一次 render，导致 setState 的状态又还原了（实际场景，自己处理一个时机即可）
@@ -144,4 +144,23 @@ describe('core', () => {
     pie.setState('selected', (data) => (data as any).area === salesByArea[2].area, false);
     expect(pie.getStates().length).toBe(0);
   });
+
+  it('interaction', () => {
+    expect(pie.chart.interactions['legend-filter']).not.toBeUndefined();
+
+    pie.update({
+      ...pie.options,
+      interactions: [
+        { type: 'element-selected', enable: false },
+        { type: 'legend-filter', enable: false },
+      ],
+    });
+
+    expect(pie.chart.interactions['element-selected']).toBeUndefined();
+    expect(pie.chart.interactions['legend-filter']).toBeUndefined();
+  });
+
+  afterAll(() => {
+    pie.destroy();
+  });
 });

__tests__/unit/plots/bar/index-spec.ts

@@ -243,4 +243,18 @@ describe('bar', () => {
     });
     expect(geometry.theme.columnWidthRatio).toBe(0.5);
   });
+
+  it('default interaction', () => {
+    const bar = new Bar(createDiv('default with active-region'), {
+      width: 300,
+      height: 400,
+      data: subSalesByArea,
+      xField: 'sales',
+      yField: 'area',
+    });
+
+    bar.render();
+
+    expect(bar.chart.interactions['active-region']).toBeDefined();
+  });
 });

__tests__/unit/plots/column/index-spec.ts

@@ -249,4 +249,18 @@ describe('column', () => {
     });
     expect(geometry.theme.columnWidthRatio).toBe(0.7);
   });
+
+  it('default interaction', () => {
+    const column = new Column(createDiv('default with active-region'), {
+      width: 300,
+      height: 400,
+      data: subSalesByArea,
+      xField: 'sales',
+      yField: 'area',
+    });
+
+    column.render();
+
+    expect(column.chart.interactions['active-region']).toBeDefined();
+  });
 });

examples/bar/basic/demo/label-position.ts

@@ -41,6 +41,9 @@ const barPlot = new Bar('container', {
   yField: 'type',
   label: {
     position: 'middle',
+    style: {
+      fill: '#fff',
+    },
   },
   meta: {
     type: {

examples/bar/basic/demo/label.ts

@@ -39,7 +39,13 @@ const barPlot = new Bar('container', {
   data,
   xField: 'sales',
   yField: 'type',
-  label: {},
+  label: {
+    position: 'left',
+    offsetX: 10,
+    style: {
+      fill: '#fff',
+    },
+  },
   meta: {
     type: {
       alias: '类别',

examples/general/theme/demo/meta.json

@@ -13,7 +13,7 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*D-ThTo5H-1kAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "registerTheme.ts",
+      "filename": "register-theme.ts",
       "title": {
         "zh": "自定义样式",
         "en": "Register theme"

examples/general/theme/demo/registerTheme.ts → examples/general/theme/demo/register-theme.ts

@@ -1,4 +1,12 @@
-import { Pie } from '@antv/g2plot';
+import { Pie, G2 } from '@antv/g2plot';
+
+const { registerTheme } = G2;
+
+registerTheme('custom-theme', {
+  colors10: ['#FACDAA', '#F4A49E', '#EE7B91', '#E85285', '#BE408C', '#BE408C'],
+  /** 20色板 */
+  colors20: ['#FACDAA', '#F4A49E', '#EE7B91', '#E85285', '#BE408C', '#BE408C', '#942D93'],
+});
 
 const data = [
   { type: '分类一', value: 27 },
@@ -17,22 +25,7 @@ const piePlot = new Pie('container', {
   radius: 0.8,
   label: {},
   interactions: [{ type: 'element-active' }],
-  theme: {
-    // for piePlot, geometry is interval, shape is rect, so we can set activeStyle like this
-    geometries: {
-      interval: {
-        rect: {
-          active: {
-            style: {
-              /** 自定义激活样式 */
-              fillOpacity: 0.65,
-              lineWidth: 0,
-            },
-          },
-        },
-      },
-    },
-  },
+  theme: 'custom-theme',
 });
 
 piePlot.render();

examples/pie/basic/demo/legend-interaction.ts

@@ -0,0 +1,25 @@
+import { Pie } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const piePlot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  radius: 0.8,
+  label: {
+    type: 'outer',
+    content: '{name} {percentage}',
+  },
+  interactions: [{ type: 'pie-legend-active' }],
+});
+
+piePlot.render();

examples/pie/basic/demo/meta.json

@@ -28,6 +28,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*y8zjS5DZib8AAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "legend-interaction.ts",
+      "title": {
+        "zh": "饼图-图例交互",
+        "en": "Pie interaction - with legend action"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*y8zjS5DZib8AAAAAAAAAAAAAARQnAQ"
+    },
     {
       "filename": "pie-texture.ts",
       "title": {
@@ -37,4 +45,4 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*6DhLR77aZloAAAAAAAAAAABkARQnAQ"
     }
   ]
-}
+}

examples/pie/basic/demo/pie-state.ts

@@ -40,4 +40,4 @@ piePlot.render();
 
 //  初始化设置默认状态；状态可叠加，可通过回调设置
 piePlot.setState('active', (data) => (data as any).type === '分类一');
-piePlot.setState('selected', (d) => (data as any).type === '分类一' || (data as any).type === '分类二');
+piePlot.setState('selected', (data) => (data as any).type === '分类一' || (data as any).type === '分类二');

examples/radar/basic/demo/crosshairs.ts

@@ -0,0 +1,50 @@
+import { Radar } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/5c41aa9b-9c8a-425f-9f4d-934b889bb75d.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const radarPlot = new Radar('container', {
+      data,
+      xField: 'item',
+      yField: 'score',
+      seriesField: 'user',
+      xAxis: {
+        label: {
+          offset: 15,
+        },
+        grid: {
+          line: {
+            type: 'line',
+          },
+        },
+      },
+      yAxis: {
+        grid: {
+          line: {
+            type: 'circle',
+          },
+        },
+      },
+      tooltip: {
+        crosshairs: {
+          type: 'xy',
+          line: {
+            style: {
+              stroke: '#565656',
+              lineDash: [4],
+            },
+          },
+          follow: true,
+        },
+      },
+      point: {
+        shape: 'circle',
+      },
+      // 开启面积
+      area: {},
+      legend: {
+        position: 'bottom',
+      },
+    });
+    radarPlot.render();
+  });

examples/radar/basic/demo/meta.json

@@ -19,6 +19,14 @@
         "en": "multiple Rardar chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*NKROSYNo6IAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "crosshairs.ts",
+      "title": {
+        "zh": "雷达图-tooltip 添加辅助线",
+        "en": "Rardar chart with tooltip crosshairs"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*r46-T43zmzwAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

examples/radar/basic/demo/series.ts

@@ -27,7 +27,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/5c41aa9b-9c8a-425f-9f4d-934b889b
       // 开启面积
       area: {},
       legend: {
-        position: 'bottom-center',
+        position: 'bottom',
       },
     });
     radarPlot.render();

src/adaptor/common.ts

@@ -48,7 +48,11 @@ export function interaction<O extends Pick<Options, 'interactions'>>(params: Par
   const { interactions } = options;
 
   each(interactions, (i: Interaction) => {
-    chart.interaction(i.type, i.cfg || {});
+    if (i.enable === false) {
+      chart.removeInteraction(i.type);
+    } else {
+      chart.interaction(i.type, i.cfg || {});
+    }
   });
 
   return params;

src/core/plot.ts

@@ -90,10 +90,7 @@ export abstract class Plot<O extends PickOptions> extends EE {
       renderer: 'canvas',
       tooltip: {
         shared: true,
-        showCrosshairs: true,
-        crosshairs: {
-          type: 'x',
-        },
+        showMarkers: false,
         offset: 20,
       },
       xAxis: {

src/plots/area/index.ts

@@ -1,3 +1,4 @@
+import { deepMix } from '@antv/util';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { AreaOptions } from './types';
@@ -9,6 +10,21 @@ export class Area extends Plot<AreaOptions> {
   /** 图表类型 */
   public type: string = 'area';
 
+  /**
+   * 获取 折线图 默认配置
+   */
+  protected getDefaultOptions() {
+    return deepMix({}, super.getDefaultOptions(), {
+      tooltip: {
+        showMarkers: true,
+        showCrosshairs: true,
+        crosshairs: {
+          type: 'x',
+        },
+      },
+    });
+  }
+
   /**
    * 获取 面积图 的适配器
    */

src/plots/bar/index.ts

@@ -14,17 +14,18 @@ export class Bar extends Plot<BarOptions> {
   public readonly type: string = 'bar';
 
   /**
-   * 获取 柱形图 的适配器
+   * 获取 条形图 默认配置
    */
-  protected getSchemaAdaptor(): Adaptor<BarOptions> {
-    return adaptor;
-  }
-
   protected getDefaultOptions() {
     return deepMix({}, super.getDefaultOptions(), {
-      // label: {
-      //   position: 'left', // 默认 label 在左侧
-      // },
+      interactions: [{ type: 'active-region' }],
     });
   }
+
+  /**
+   * 获取 条形图 的适配器
+   */
+  protected getSchemaAdaptor(): Adaptor<BarOptions> {
+    return adaptor;
+  }
 }

src/plots/box/index.ts

@@ -25,6 +25,7 @@ export class Box extends Plot<BoxOptions> {
       // 默认 tooltips 共享，不显示 makers
       tooltip: {
         showMarkers: false,
+        showCrosshairs: true,
         shared: true,
       },
     });