fix: 双轴图 theme 主题设置

__tests__/unit/plots/dual-axes/theme-spec.ts

@@ -0,0 +1,66 @@
+import { DualAxes, G2 } from '../../../../src';
+import { PV_DATA, UV_DATA } from '../../../data/pv-uv';
+import { createDiv } from '../../../utils/dom';
+
+G2.registerTheme('my-theme', {
+  components: {
+    axis: {
+      left: {
+        line: {
+          style: {
+            stroke: '#5B8FF9',
+          },
+        },
+      },
+      right: {
+        line: {
+          style: {
+            stroke: '#5B8FF9',
+          },
+        },
+      },
+    },
+    legend: {
+      top: {
+        itemName: {
+          style: {
+            fill: '#5B8FF9',
+          },
+        },
+      },
+    },
+  },
+});
+
+describe('DualAxes theme', () => {
+  it('theme', () => {
+    const yField = ['pv', 'uv'];
+    const dualAxes = new DualAxes(createDiv(), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField,
+      theme: 'my-theme',
+    });
+
+    dualAxes.render();
+
+    // test legend
+    expect(dualAxes.chart.getTheme().components.legend.top.itemName.style.fill).toBe('#5B8FF9');
+
+    const legend = dualAxes.chart.getComponents().find((i) => i.type === 'legend');
+    expect(legend.component.cfg.itemName.style.fill).toBe('#5B8FF9');
+
+    const [leftView, rightView] = dualAxes.chart.views;
+    const leftViewAxis = leftView.getComponents().find((i) => i.type === 'axis' && i.direction === 'left');
+    expect(leftView.getTheme().components.axis.left.line.style.stroke).toBe('#5B8FF9');
+    expect(leftViewAxis.component.cfg.line.style.stroke).toBe('#5B8FF9');
+
+    const rightViewAxis = rightView.getComponents().find((i) => i.type === 'axis' && i.direction === 'right');
+    expect(rightView.getTheme().components.axis.right.line.style.stroke).toBe('#5B8FF9');
+    expect(rightViewAxis.component.cfg.line.style.stroke).toBe('#5B8FF9');
+
+    dualAxes.destroy();
+  });
+});

src/plots/dual-axes/adaptor.ts

@@ -1,7 +1,7 @@
 import { each, findIndex, get, find, isObject, every, isEqual, isBoolean } from '@antv/util';
 import { Scale, Types, Event } from '@antv/g2';
 import {
-  theme,
+  theme as commonTheme,
   animation as commonAnimation,
   scale,
   interaction as commonInteraction,
@@ -282,6 +282,20 @@ export function annotation(params: Params<DualAxesOptions>): Params<DualAxesOpti
   return params;
 }
 
+export function theme(params: Params<DualAxesOptions>): Params<DualAxesOptions> {
+  const { chart } = params;
+
+  /*
+   * 双轴图中，部分组件是绘制在子 view 层（例如 axis，line），部分组件是绘制在 chart （例如 legend)
+   * 为 chart 和 子 view 均注册 theme，使其自行遵循 G2 theme geometry > view > chart 进行渲染。
+   */
+  commonTheme(deepAssign({}, params, { chart: findViewById(chart, LEFT_AXES_VIEW) }));
+  commonTheme(deepAssign({}, params, { chart: findViewById(chart, RIGHT_AXES_VIEW) }));
+  commonTheme(params);
+
+  return params;
+}
+
 export function animation(params: Params<DualAxesOptions>): Params<DualAxesOptions> {
   const { chart } = params;