diff --git a/src/chart/treemap/Breadcrumb.ts b/src/chart/treemap/Breadcrumb.ts index 6dd35c5df2..0875c4a2b3 100644 --- a/src/chart/treemap/Breadcrumb.ts +++ b/src/chart/treemap/Breadcrumb.ts @@ -29,7 +29,8 @@ import { ZRElementEvent, BoxLayoutOptionMixin, ECElement } from '../../util/type import Element from 'zrender/src/Element'; import Model from '../../model/Model'; import { convertOptionIdName } from '../../util/model'; -import { Z2_EMPHASIS_LIFT } from '../../util/states'; +import { toggleHoverEmphasis, Z2_EMPHASIS_LIFT } from '../../util/states'; +import { createTextStyle } from '../../label/labelStyle'; const TEXT_PADDING = 8; const ITEM_GAP = 8; @@ -55,6 +56,7 @@ interface LayoutParam { } type BreadcrumbItemStyleModel = Model; +type BreadcrumbEmphasisItemStyleModel = Model; type BreadcrumbTextStyleModel = Model; class Breadcrumb { @@ -81,8 +83,9 @@ class Breadcrumb { } const normalStyleModel = model.getModel('itemStyle'); - // let emphasisStyleModel = model.getModel('emphasis.itemStyle'); + const emphasisModel = model.getModel('emphasis'); const textStyleModel = normalStyleModel.getModel('textStyle'); + const emphasisTextStyleModel = emphasisModel.getModel(['itemStyle', 'textStyle']); const layoutParam: LayoutParam = { pos: { @@ -101,7 +104,10 @@ class Breadcrumb { }; this._prepare(targetNode, layoutParam, textStyleModel); - this._renderContent(seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect); + this._renderContent( + seriesModel, layoutParam, normalStyleModel, + emphasisModel, textStyleModel, emphasisTextStyleModel, onSelect + ); layout.positionElement(thisGroup, layoutParam.pos, layoutParam.box); } @@ -134,7 +140,9 @@ class Breadcrumb { seriesModel: TreemapSeriesModel, layoutParam: LayoutParam, normalStyleModel: BreadcrumbItemStyleModel, + emphasisModel: BreadcrumbEmphasisItemStyleModel, textStyleModel: BreadcrumbTextStyleModel, + emphasisTextStyleModel: BreadcrumbTextStyleModel, onSelect: OnSelectCallback ) { // Start rendering. @@ -144,6 +152,7 @@ class Breadcrumb { const availableSize = layout.getAvailableSize(layoutParam.pos, layoutParam.box); let totalWidth = layoutParam.totalWidth; const renderList = layoutParam.renderList; + const emphasisItemStyle = emphasisModel.getModel('itemStyle').getItemStyle(); for (let i = renderList.length - 1; i >= 0; i--) { const item = renderList[i]; @@ -172,11 +181,7 @@ class Breadcrumb { } ), textContent: new graphic.Text({ - style: { - text, - fill: textStyleModel.getTextColor(), - font: textStyleModel.getFont() - } + style: createTextStyle(textStyleModel, { text }) }), textConfig: { position: 'inside' @@ -185,7 +190,11 @@ class Breadcrumb { onclick: curry(onSelect, itemNode) }); (el as ECElement).disableLabelAnimation = true; - + el.getTextContent().ensureState('emphasis').style = createTextStyle(emphasisTextStyleModel, { text }); + el.ensureState('emphasis').style = emphasisItemStyle; + toggleHoverEmphasis( + el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') + ); this.group.add(el); packEventData(el, seriesModel, itemNode); diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts index 15c0a5e9a2..2e5f22835f 100644 --- a/src/chart/treemap/TreemapSeries.ts +++ b/src/chart/treemap/TreemapSeries.ts @@ -36,7 +36,8 @@ import { DecalObject, SeriesLabelOption, DefaultEmphasisFocus, - AriaOptionMixin + AriaOptionMixin, + BlurScope } from '../../util/types'; import GlobalModel from '../../model/Global'; import { LayoutRect } from '../../util/layout'; @@ -202,6 +203,9 @@ export interface TreemapSeriesOption itemStyle?: BreadcrumbItemStyleOption emphasis?: { + disabled?: boolean + focus?: DefaultEmphasisFocus + blurScope?: BlurScope itemStyle?: BreadcrumbItemStyleOption } } @@ -265,6 +269,11 @@ class TreemapSeriesModel extends SeriesModel { textStyle: { color: '#fff' } + }, + emphasis: { + itemStyle: { + color: 'rgba(0,0,0,0.9)' //'#5793f3', + } } }, label: { diff --git a/src/data/DataStore.ts b/src/data/DataStore.ts index b839d8b0f3..bb9dcf179c 100644 --- a/src/data/DataStore.ts +++ b/src/data/DataStore.ts @@ -448,7 +448,7 @@ class DataStore { } getValues(idx: number): ParsedValue[]; - getValues(dimensions: readonly DimensionIndex[], idx?: number): ParsedValue[] + getValues(dimensions: readonly DimensionIndex[], idx?: number): ParsedValue[]; getValues(dimensions: readonly DimensionIndex[] | number, idx?: number): ParsedValue[] { const values = []; let dimArr: DimensionIndex[] = []; diff --git a/src/data/Graph.ts b/src/data/Graph.ts index a250ad9632..f7939a5304 100644 --- a/src/data/Graph.ts +++ b/src/data/Graph.ts @@ -360,8 +360,8 @@ class GraphNode { } // TODO: TYPE Same type with Model#getModel - getModel(): Model - getModel(path: S): Model + getModel(): Model; + getModel(path: S): Model; getModel(path?: string): Model { if (this.dataIndex < 0) { return; @@ -410,8 +410,8 @@ class GraphEdge { this.dataIndex = dataIndex == null ? -1 : dataIndex; } - getModel(): Model - getModel(path: S): Model + getModel(): Model; + getModel(path: S): Model; // eslint-disable-next-line @typescript-eslint/no-unused-vars getModel(path?: string): Model { if (this.dataIndex < 0) { diff --git a/src/data/Tree.ts b/src/data/Tree.ts index ad7ae4241c..8467084945 100644 --- a/src/data/Tree.ts +++ b/src/data/Tree.ts @@ -98,9 +98,9 @@ export class TreeNode { * @param cb If in preorder and return false, * its subtree will not be visited. */ - eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(cb: TreeTraverseCallback, context?: Ctx): void + eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(cb: TreeTraverseCallback, context?: Ctx): void; eachNode( options: TreeTraverseOrder | TreeTraverseOption | TreeTraverseCallback, cb?: TreeTraverseCallback | Ctx, @@ -225,7 +225,7 @@ export class TreeNode { return this.hostTree.data.getItemLayout(this.dataIndex); } - getModel(): Model + getModel(): Model; // @depcrecated // getModel(path: S): Model // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -251,8 +251,8 @@ export class TreeNode { * }); */ // TODO: TYPE - setVisual(key: string, value: any): void - setVisual(obj: Dictionary): void + setVisual(key: string, value: any): void; + setVisual(obj: Dictionary): void; setVisual(key: string | Dictionary, value?: any) { this.dataIndex >= 0 && this.hostTree.data.setItemVisual(this.dataIndex, key as any, value); @@ -353,9 +353,9 @@ class Tree { * @param cb * @param context */ - eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void - eachNode(cb: TreeTraverseCallback, context?: Ctx): void + eachNode(options: TreeTraverseOrder, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(options: TreeTraverseOption, cb: TreeTraverseCallback, context?: Ctx): void; + eachNode(cb: TreeTraverseCallback, context?: Ctx): void; eachNode( options: TreeTraverseOrder | TreeTraverseOption | TreeTraverseCallback, cb?: TreeTraverseCallback | Ctx, diff --git a/src/model/Global.ts b/src/model/Global.ts index d4777a4ee9..cadc98b20d 100644 --- a/src/model/Global.ts +++ b/src/model/Global.ts @@ -696,17 +696,17 @@ echarts.use([${seriesImportName}]);`); eachComponent( cb: EachComponentAllCallback, context?: T - ): void + ): void; eachComponent( mainType: string, cb: EachComponentInMainTypeCallback, context?: T - ): void + ): void; eachComponent( mainType: QueryConditionKindA, cb: EachComponentInMainTypeCallback, context?: T - ): void + ): void; eachComponent( mainType: string | QueryConditionKindA | EachComponentAllCallback, cb?: EachComponentInMainTypeCallback | T, diff --git a/src/visual/VisualMapping.ts b/src/visual/VisualMapping.ts index 8898bc7b06..f964e3fb0a 100644 --- a/src/visual/VisualMapping.ts +++ b/src/visual/VisualMapping.ts @@ -377,13 +377,13 @@ class VisualMapping { } } - static mapVisual(visual: T, callback: (visual: T, key?: string | number) => T, context?: Ctx): T - static mapVisual(visual: T[], callback: (visual: T, key?: string | number) => T[], context?: Ctx): T[] + static mapVisual(visual: T, callback: (visual: T, key?: string | number) => T, context?: Ctx): T; + static mapVisual(visual: T[], callback: (visual: T, key?: string | number) => T[], context?: Ctx): T[]; static mapVisual( visual: Dictionary, callback: (visual: T, key?: string | number) => Dictionary, context?: Ctx - ): Dictionary + ): Dictionary; static mapVisual( visual: T | T[] | Dictionary, callback: (visual: T, key?: string | number) => T | T[] | Dictionary, diff --git a/test/treemap-simple.html b/test/treemap-simple.html index c71b8122ca..37c7aa2ffc 100644 --- a/test/treemap-simple.html +++ b/test/treemap-simple.html @@ -66,6 +66,15 @@ } }, breadcrumb: { + emphasis: { + itemStyle: { + color: 'blue', + opacity: 0.6, + textStyle: { + color: 'green' + } + }, + } }, levels: [ {