Fix duax animation (#1618)

* fix: 修复 animate 无法关闭，以及替换使用公共方法

* fix: 去除 lint 中的 warning

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>

examples/dual-axes/stacked-column-line/demo/custom-stacked-column-line.ts

@@ -1,4 +1,12 @@
-import { DualAxes } from '@antv/g2plot';
+import { DualAxes, 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 uvBillData = [
   { time: '2019-03', value: 350, type: 'uv' },
@@ -41,10 +49,26 @@ const dualAxesChart = new DualAxes('container', {
   legend: {
     marker: {
       symbol: 'circle',
+      style: {
+        lineWidth: 2,
+        r: 6,
+        stroke: '#FAA219',
+        fill: '#fff',
+      },
     },
     layout: 'vertical',
     position: 'right',
   },
+  interactions: [
+    {
+      type: 'element-highlight',
+    },
+    {
+      type: 'active-region',
+    },
+  ],
+  animation: false,
+  theme: 'custom-theme',
 });
 
 dualAxesChart.render();

src/plots/dual-axes/adaptor.ts

@@ -1,7 +1,11 @@
 import { deepMix, each, findIndex } from '@antv/util';
 import { Scale } from '@antv/g2/lib/dependents';
-import { theme, animation, scale } from '../../adaptor/common';
-import { Interaction } from '../../types/interaction';
+import {
+  theme as commonTheme,
+  animation as commonAnimation,
+  scale,
+  interaction as commonInteraction,
+} from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { getOption } from './util/option';
@@ -143,18 +147,36 @@ export function tooltip(params: Params<DualAxesOption>): Params<DualAxesOption>
  * @param params
  */
 export function interaction(params: Params<DualAxesOption>): Params<DualAxesOption> {
-  const { chart, options } = params;
-  const { interactions } = options;
+  const { chart } = params;
   const [leftView, rightView] = chart.views;
-  each(interactions, (i: Interaction) => {
-    if (i.enable === false) {
-      leftView.removeInteraction(i.type);
-      rightView.removeInteraction(i.type);
-    } else {
-      leftView.interaction(i.type, i.cfg || {});
-      rightView.interaction(i.type, i.cfg || {});
-    }
-  });
+
+  commonInteraction(deepMix({}, params, { chart: leftView }));
+  commonInteraction(deepMix({}, params, { chart: rightView }));
+
+  return params;
+}
+
+/**
+ * theme
+ * @param params
+ */
+export function theme(params: Params<DualAxesOption>): Params<DualAxesOption> {
+  const { chart } = params;
+  const [leftView, rightView] = chart.views;
+
+  commonTheme(deepMix({}, params, { chart: leftView }));
+  commonTheme(deepMix({}, params, { chart: rightView }));
+
+  return params;
+}
+
+export function animation(params: Params<DualAxesOption>): Params<DualAxesOption> {
+  const { chart } = params;
+  const [leftView, rightView] = chart.views;
+
+  commonAnimation(deepMix({}, params, { chart: leftView }));
+  commonAnimation(deepMix({}, params, { chart: rightView }));
+
   return params;
 }