diff --git a/__tests__/unit/plots/dual-axes/legend-spec.ts b/__tests__/unit/plots/dual-axes/legend-spec.ts index 1d4f8ee34b..1ff2679651 100644 --- 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 index e77fa44500..f077d5d78c 100644 --- 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) => {