From 32a1a40256c22cbb0c09123137a3fb4c238bb78e Mon Sep 17 00:00:00 2001 From: skie1997 Date: Tue, 7 Jan 2025 00:40:55 +0800 Subject: [PATCH] feat: add highlight effect --- .../runtime/browser/test-page/ranking-list.ts | 44 ++++++++++++++++++- .../src/charts/ranking-list/interface.ts | 16 +++++++ .../ranking-list/ranking-list-transformer.ts | 16 ++++++- 3 files changed, 74 insertions(+), 2 deletions(-) diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/ranking-list.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/ranking-list.ts index cadcc4a33..c4d3d32c3 100644 --- a/packages/vchart-extension/__tests__/runtime/browser/test-page/ranking-list.ts +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/ranking-list.ts @@ -86,6 +86,11 @@ const spec = { } ] } + }, + state: { + blur: { + opacity: 0.2 + } } }, labelLayout: guiObject.labelLayout, @@ -99,6 +104,11 @@ const spec = { // stroke: 'yellow', // symbolType: // '' + }, + state: { + blur: { + opacity: 0.2 + } } }, orderLabel: { @@ -109,6 +119,11 @@ const spec = { formatMethod: (text, ctx) => { console.log('ctx-order', ctx); return `order${text}`; + }, + state: { + blur: { + opacity: 0.2 + } } }, nameLabel: { @@ -119,6 +134,11 @@ const spec = { formatMethod: (text, ctx) => { console.log('ctx-name', ctx); return `name${text}`; + }, + state: { + blur: { + opacity: 0.2 + } } }, valueLabel: { @@ -129,6 +149,11 @@ const spec = { formatMethod: (text, ctx) => { console.log('ctx-value', ctx); return `value${text}`; + }, + state: { + blur: { + opacity: 0.2 + } } }, decorateHaloIcons: [ @@ -138,6 +163,11 @@ const spec = { symbolType: 'circle', size: 8, fill: 'rgba(255,255,255,0.5)' + }, + state: { + blur: { + opacity: 0.2 + } } }, { @@ -148,6 +178,11 @@ const spec = { lineWidth: 1, stroke: 'rgba(255,255,255,0.8)', fill: 'rgba(255,255,255,0.5)' + }, + state: { + blur: { + opacity: 0.2 + } } } ], @@ -168,7 +203,14 @@ const spec = { // fill: 'red', symbolType: 'rect' } - } + }, + interactions: [ + { + type: 'element-highlight-by-key', + trigger: ['pointerdown'], + triggerOff: null + } + ] // animation: false }; diff --git a/packages/vchart-extension/src/charts/ranking-list/interface.ts b/packages/vchart-extension/src/charts/ranking-list/interface.ts index bf674032b..7427d7465 100644 --- a/packages/vchart-extension/src/charts/ranking-list/interface.ts +++ b/packages/vchart-extension/src/charts/ranking-list/interface.ts @@ -1,3 +1,5 @@ +import { IMarkStateSpec, IMarkStateStyleSpec } from '@visactor/vchart'; +import { StateValue } from '@visactor/vchart/src/compile/mark'; import { Datum } from '@visactor/vchart/src/typings/common'; import { ITextGraphicAttribute, @@ -38,6 +40,7 @@ export interface IRankingListSpec { bar?: { height?: number; style?: IRectGraphicAttribute; + state?: Record | IMarkStateStyleSpec>; }; /** * 柱图背景 @@ -46,6 +49,11 @@ export interface IRankingListSpec { visible?: boolean; type?: string; style?: ISymbolGraphicAttribute | IRectGraphicAttribute; + state?: Record< + StateValue, + | IMarkStateSpec + | IMarkStateStyleSpec + >; }; /** * 排名图标 @@ -53,6 +61,7 @@ export interface IRankingListSpec { rankingIcon?: { visible?: boolean; style?: ISymbolGraphicAttribute; + state?: Record | IMarkStateStyleSpec>; }; /** * 装饰图元 @@ -62,6 +71,10 @@ export interface IRankingListSpec { visible?: boolean; // type?: 'circle' | 'square' | 'emptyCircle' | 'diamond' | 'halo' | 'concentric' | 'custom'; style?: ISymbolGraphicAttribute; + state?: Record< + StateValue, + IMarkStateSpec | IMarkStateStyleSpec + >; } ]; /** @@ -71,6 +84,7 @@ export interface IRankingListSpec { visible?: boolean; style?: ITextGraphicAttribute; formatMethod?: (text: string, datum: Datum) => string; + state?: Record | IMarkStateStyleSpec>; }; /** * 名称标签(yField对应的标签) @@ -79,6 +93,7 @@ export interface IRankingListSpec { visible?: boolean; style?: ITextGraphicAttribute; formatMethod?: (text: string, datum: Datum) => string; + state?: Record | IMarkStateStyleSpec>; }; /** * 值标签(xField对应的标签) @@ -87,6 +102,7 @@ export interface IRankingListSpec { visible?: boolean; style?: ITextGraphicAttribute; formatMethod?: (text: string, datum: Datum) => string; + state?: Record | IMarkStateStyleSpec>; }; /** * 每页行数 diff --git a/packages/vchart-extension/src/charts/ranking-list/ranking-list-transformer.ts b/packages/vchart-extension/src/charts/ranking-list/ranking-list-transformer.ts index e6d81df6f..338ecf61e 100644 --- a/packages/vchart-extension/src/charts/ranking-list/ranking-list-transformer.ts +++ b/packages/vchart-extension/src/charts/ranking-list/ranking-list-transformer.ts @@ -178,6 +178,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer visible: true, dataKey: DATA_KEY, zIndex: -99, + state: spec.barBackground?.state, style: { x: (datum: Datum, ctx: any) => spec.barBackground.type === 'symbol' ? ctx.getRegion().getLayoutRect().width / 2 : 0, @@ -214,8 +215,12 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer dataId: 'data', visible: true, dataKey: DATA_KEY, + state: decorateHaloIcon?.state, style: { x: (datum: Datum, ctx: any) => { + if (datum[spec.xField] === undefined || datum[spec.xField] === null) { + return undefined; + } return ctx.valueToX([datum[spec.xField]]); }, y: (datum: Datum, ctx: any) => { @@ -244,6 +249,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer dataId: 'data', visible: true, dataKey: DATA_KEY, + state: spec.rankingIcon.state, style: { x: (datum: Datum) => { if (spec.labelLayout === 'bothEnd') { @@ -298,6 +304,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer type: 'text', dataId: 'data', dataKey: DATA_KEY, + state: spec.nameLabel?.state, style: { text: (datum: Datum) => this.formatDatum(spec.yField, datum), x: () => { @@ -340,6 +347,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer type: 'text', dataId: 'data', dataKey: DATA_KEY, + state: spec.orderLabel?.state, style: { text: (datum: Datum) => this.formatDatum(ORDER_KEY, datum), x: (datum: Datum) => { @@ -383,6 +391,11 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer dataId: 'data', visible: true, dataKey: DATA_KEY, + state: { + blur: { + opacity: 0.2 + } + }, style: { text: (datum: Datum) => this.formatDatum(spec.xField, datum), x: (datum: Datum, ctx: any) => { @@ -420,6 +433,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer } transformPaddingSpec(spec: any) { + const maxHaloIconSize = Math.max(...spec.decorateHaloIcons.map((icon: any) => icon.style.size ?? 18)); spec.padding = { left: spec.labelLayout === 'bothEnd' @@ -430,7 +444,7 @@ export class RankingListChartSpecTransformer extends CommonChartSpecTransformer : 0) + (spec.rankingIcon.style.visible ? NAME_SYMBOL_PADDING_RIGHT + (spec.rankingIcon.style.size ?? 10) : 0) + CHART_PADDING_LEFT - : CHART_PADDING_LEFT, + : CHART_PADDING_LEFT + maxHaloIconSize / 2, right: spec.labelLayout === 'bothEnd' ? VALUE_LABEL_PADDING_LEFT +