修复: [BUG] 双轴图图例legend使用symbol的时候，颜色不能自动调整 (#2776)

* fix: 修复 [BUG] 双轴图图例legend使用symbol的时候，颜色不能自动调整 * fix: 修复 [BUG] 双轴图图例legend使用symbol的时候，颜色不能自动调整 -2 Co-authored-by: ai-qing-hai <wb-xcf804241@antgroup.com>
antvis · Aug 9, 2021 · 93000e5 · 93000e5
1 parent c80f072
commit 93000e5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/__tests__/unit/plots/dual-axes/legend-spec.ts b/__tests__/unit/plots/dual-axes/legend-spec.ts
@@ -383,6 +383,34 @@ describe('Legend', () => {
     });
   });
 
+  it('Legend custom', () => {
+    const dualAxes = new DualAxes(createDiv('Legend custom '), {
+      width: 400,
+      height: 500,
+      data: [PV_DATA, UV_DATA],
+      xField: 'date',
+      yField: ['pv', 'uv'],
+      legend: {
+        marker: {
+          symbol: 'diamond',
+        },
+      },
+    });
+
+    dualAxes.render();
+
+    const legendController = dualAxes.chart.getController('legend');
+    const legendComponent = legendController.getComponents()[0];
+    const cfg = legendComponent.component.cfg;
+
+    expect(cfg.items[0].marker.symbol).toBe('diamond');
+    expect(cfg.items[1].marker.symbol).toBe('diamond');
+    expect(cfg.items[0].marker.style.fill).toBe('#5B8FF9');
+    expect(cfg.items[1].marker.style.fill).toBe('#5AD8A6');
+
+    dualAxes.destroy();
+  });
+
   it('Legend custom', () => {
     const dualAxes = new DualAxes(createDiv('Legend custom '), {
       width: 400,

diff --git a/src/plots/dual-axes/util/legend.ts b/src/plots/dual-axes/util/legend.ts
@@ -1,6 +1,6 @@
-import { reduce, get } from '@antv/util';
+import { reduce, get, isEmpty, isFunction } from '@antv/util';
 import { View, Util } from '@antv/g2';
-import { findGeometry } from '../../../utils';
+import { deepAssign, findGeometry } from '../../../utils';
 import { GeometryOption } from '../types';
 import { Legend } from '../../../types/legend';
 import { isLine } from './option';
@@ -24,7 +24,19 @@ export function getViewLegendItems(params: {
     const color = colorAttribute.values[0];
 
     const marker =
-      userMarker ||
+      (isFunction(userMarker)
+        ? userMarker
+        : !isEmpty(userMarker) &&
+          deepAssign(
+            {},
+            {
+              style: {
+                stroke: color,
+                fill: color,
+              },
+            },
+            userMarker
+          )) ||
       (isLine(geometryOption)
         ? {
             symbol: (x: number, y: number, r: number) => {