From 8c2267d4534cf32eb47acc0ece73015160fb0cf4 Mon Sep 17 00:00:00 2001 From: 100pah Date: Wed, 22 Apr 2020 02:15:29 +0800 Subject: [PATCH] fix: Enable treemap emphasis label formatter. Fix #11854. And add test cases. Note: the implementation of "insert levelModel" is modified from "Tree.getModel" to "beforeLink nodeData.wrapMethod('getItemModel', ...)", because the former one miss the case of `data.getItemModel`, which is needed in label formatter fetcher. --- src/chart/treemap/TreemapSeries.js | 20 ++++++++++++---- src/chart/treemap/TreemapView.js | 30 ++++++++++++++---------- src/util/graphic.js | 17 ++++++++------ test/runTest/actions/__meta__.json | 1 + test/runTest/actions/treemap-action.json | 1 + 5 files changed, 44 insertions(+), 25 deletions(-) create mode 100644 test/runTest/actions/treemap-action.json diff --git a/src/chart/treemap/TreemapSeries.js b/src/chart/treemap/TreemapSeries.js index be917ba8e..e68d9b614 100644 --- a/src/chart/treemap/TreemapSeries.js +++ b/src/chart/treemap/TreemapSeries.js @@ -183,15 +183,25 @@ export default SeriesModel.extend({ var levels = option.levels || []; levels = option.levels = setDefault(levels, ecModel); - - var treeOption = {}; - - treeOption.levels = levels; + var levelModels = zrUtil.map(levels || [], function (levelDefine) { + return new Model(levelDefine, this, ecModel); + }, this); // Make sure always a new tree is created when setOption, // in TreemapView, we check whether oldTree === newTree // to choose mappings approach among old shapes and new shapes. - return Tree.createTree(root, this, treeOption).data; + var tree = Tree.createTree(root, this, null, beforeLink); + + function beforeLink(nodeData) { + nodeData.wrapMethod('getItemModel', function (model, idx) { + var node = tree.getNodeByDataIndex(idx); + var levelModel = levelModels[node.depth]; + levelModel && (model.parentModel = levelModel); + return model; + }); + } + + return tree.data; }, optionUpdated: function () { diff --git a/src/chart/treemap/TreemapView.js b/src/chart/treemap/TreemapView.js index 7a3671801..4b81b68b6 100644 --- a/src/chart/treemap/TreemapView.js +++ b/src/chart/treemap/TreemapView.js @@ -735,7 +735,7 @@ function renderNode( // Background var bg = giveGraphic('background', Rect, depth, Z_BG); - bg && renderBackground(group, bg, isParent && thisLayout.upperHeight); + bg && renderBackground(group, bg, isParent && thisLayout.upperLabelHeight); // No children, render content. if (isParent) { @@ -856,16 +856,7 @@ function renderNode( } function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) { - var text = zrUtil.retrieve( - seriesModel.getFormattedLabel( - thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label' - ), - nodeModel.get('name') - ); - if (!upperLabelRect && thisLayout.isLeafRoot) { - var iconChar = seriesModel.get('drillDownIcon', true); - text = iconChar ? iconChar + ' ' + text : text; - } + var defaultText = nodeModel.get('name'); var normalLabelModel = nodeModel.getModel( upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL @@ -879,13 +870,18 @@ function renderNode( graphic.setLabelStyle( normalStyle, emphasisStyle, normalLabelModel, emphasisLabelModel, { - defaultText: isShow ? text : null, + defaultText: isShow ? defaultText : null, autoColor: visualColor, isRectText: true, - labelFetcher: seriesModel + labelFetcher: seriesModel, + labelDataIndex: thisNode.dataIndex, + labelProp: upperLabelRect ? 'upperLabel' : 'label' } ); + addDrillDownIcon(normalStyle, upperLabelRect, thisLayout); + addDrillDownIcon(emphasisStyle, upperLabelRect, thisLayout); + upperLabelRect && (normalStyle.textRect = zrUtil.clone(upperLabelRect)); normalStyle.truncate = (isShow && normalLabelModel.get('ellipsis')) @@ -897,6 +893,14 @@ function renderNode( : null; } + function addDrillDownIcon(style, upperLabelRect, thisLayout) { + var text = style.text; + if (!upperLabelRect && thisLayout.isLeafRoot && text != null) { + var iconChar = seriesModel.get('drillDownIcon', true); + style.text = iconChar ? iconChar + ' ' + text : text; + } + } + function giveGraphic(storageName, Ctor, depth, z) { var element = oldRawIndex != null && oldStorage[storageName][oldRawIndex]; var lasts = lastsForAnimation[storageName]; diff --git a/src/util/graphic.js b/src/util/graphic.js index 2720dac2a..e11239fd8 100644 --- a/src/util/graphic.js +++ b/src/util/graphic.js @@ -652,11 +652,13 @@ export function getHighlightDigit(highlightKey) { * @param {Object} opt Check `opt` of `setTextStyleCommon` to find other props. * @param {string|Function} [opt.defaultText] * @param {module:echarts/model/Model} [opt.labelFetcher] Fetch text by - * `opt.labelFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex)` - * @param {module:echarts/model/Model} [opt.labelDataIndex] Fetch text by - * `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex)` - * @param {module:echarts/model/Model} [opt.labelDimIndex] Fetch text by - * `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex)` + * `opt.labelFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex, opt.labelProp)` + * @param {number} [opt.labelDataIndex] Fetch text by + * `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex, opt.labelProp)` + * @param {number} [opt.labelDimIndex] Fetch text by + * `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex, opt.labelProp)` + * @param {string} [opt.labelProp] Fetch text by + * `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex, opt.labelProp)` * @param {Object} [normalSpecified] * @param {Object} [emphasisSpecified] */ @@ -670,6 +672,7 @@ export function setLabelStyle( var labelFetcher = opt.labelFetcher; var labelDataIndex = opt.labelDataIndex; var labelDimIndex = opt.labelDimIndex; + var labelProp = opt.labelProp; // This scenario, `label.normal.show = true; label.emphasis.show = false`, // is not supported util someone requests. @@ -683,7 +686,7 @@ export function setLabelStyle( var baseText; if (showNormal || showEmphasis) { if (labelFetcher) { - baseText = labelFetcher.getFormattedLabel(labelDataIndex, 'normal', null, labelDimIndex); + baseText = labelFetcher.getFormattedLabel(labelDataIndex, 'normal', null, labelDimIndex, labelProp); } if (baseText == null) { baseText = zrUtil.isFunction(opt.defaultText) ? opt.defaultText(labelDataIndex, opt) : opt.defaultText; @@ -693,7 +696,7 @@ export function setLabelStyle( var emphasisStyleText = showEmphasis ? zrUtil.retrieve2( labelFetcher - ? labelFetcher.getFormattedLabel(labelDataIndex, 'emphasis', null, labelDimIndex) + ? labelFetcher.getFormattedLabel(labelDataIndex, 'emphasis', null, labelDimIndex, labelProp) : null, baseText ) diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index d30cba7f1..b5be863c4 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -148,6 +148,7 @@ "tree-image": 1, "tree-legend": 1, "tree-radial": 1, + "treemap-action": 3, "treemap-disk": 3, "treemap-disk2": 3, "treemap-obama": 2, diff --git a/test/runTest/actions/treemap-action.json b/test/runTest/actions/treemap-action.json new file mode 100644 index 000000000..ce1813612 --- /dev/null +++ b/test/runTest/actions/treemap-action.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":834,"x":769,"y":139},{"type":"mousemove","time":1034,"x":670,"y":113},{"type":"mousemove","time":1167,"x":665,"y":113},{"type":"mousemove","time":1367,"x":368,"y":117},{"type":"mousemove","time":1567,"x":291,"y":172},{"type":"mousemove","time":1774,"x":282,"y":184},{"type":"mousemove","time":1984,"x":278,"y":197},{"type":"mousemove","time":2184,"x":273,"y":239},{"type":"mousemove","time":2392,"x":275,"y":245},{"type":"mousemove","time":2684,"x":277,"y":245},{"type":"mousemove","time":2884,"x":373,"y":254},{"type":"mousemove","time":3090,"x":417,"y":251},{"type":"mousemove","time":3308,"x":430,"y":246},{"type":"mousemove","time":3701,"x":433,"y":244},{"type":"mousemove","time":3901,"x":495,"y":203},{"type":"mousemove","time":4110,"x":497,"y":203},{"type":"mousemove","time":4385,"x":497,"y":202},{"type":"mousemove","time":4591,"x":508,"y":180},{"type":"mousemove","time":4801,"x":512,"y":170},{"type":"mousemove","time":5001,"x":514,"y":167},{"type":"mousemove","time":5201,"x":517,"y":163},{"type":"mousemove","time":5401,"x":652,"y":168},{"type":"mousemove","time":5609,"x":714,"y":192},{"type":"mousemove","time":5817,"x":685,"y":263},{"type":"mousemove","time":6017,"x":679,"y":277},{"type":"mousemove","time":6218,"x":660,"y":349},{"type":"mousemove","time":6419,"x":618,"y":427},{"type":"mousemove","time":6635,"x":600,"y":454},{"type":"mousemove","time":6844,"x":576,"y":428},{"type":"mousemove","time":7051,"x":313,"y":120},{"type":"mousemove","time":7258,"x":315,"y":105},{"type":"mousemove","time":7467,"x":106,"y":126},{"type":"mousemove","time":7667,"x":52,"y":109},{"type":"mousemove","time":7876,"x":74,"y":92},{"type":"mousedown","time":7927,"x":74,"y":93},{"type":"mousemove","time":8092,"x":74,"y":93},{"type":"mouseup","time":8109,"x":74,"y":93},{"time":8110,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8343,"x":74,"y":94}],"scrollY":0,"scrollX":0,"timestamp":1587492634682},{"name":"Action 2","ops":[{"type":"mousemove","time":561,"x":653,"y":59},{"type":"mousemove","time":761,"x":613,"y":100},{"type":"mousemove","time":962,"x":596,"y":125},{"type":"mousemove","time":1170,"x":582,"y":147},{"type":"mousemove","time":1378,"x":569,"y":209},{"type":"mousemove","time":1578,"x":528,"y":378},{"type":"mousemove","time":1785,"x":524,"y":388},{"type":"mousemove","time":1978,"x":524,"y":388},{"type":"mousemove","time":2178,"x":508,"y":445},{"type":"mousemove","time":2695,"x":505,"y":445},{"type":"mousemove","time":2895,"x":384,"y":483},{"type":"mousemove","time":3095,"x":334,"y":496},{"type":"mousemove","time":3302,"x":312,"y":496},{"type":"mousemove","time":3611,"x":309,"y":496},{"type":"mousemove","time":3811,"x":227,"y":501},{"type":"mousemove","time":4019,"x":225,"y":501},{"type":"mousemove","time":4445,"x":225,"y":501},{"type":"mousemove","time":4645,"x":225,"y":501},{"type":"mousemove","time":4845,"x":231,"y":435},{"type":"mousemove","time":5053,"x":237,"y":396},{"type":"mousemove","time":5287,"x":237,"y":396}],"scrollY":534,"scrollX":0,"timestamp":1587492653255},{"name":"Action 3","ops":[{"type":"mousemove","time":484,"x":408,"y":21},{"type":"mousemove","time":693,"x":386,"y":59},{"type":"mousemove","time":900,"x":383,"y":68},{"type":"mousemove","time":1200,"x":383,"y":69},{"type":"mousemove","time":1400,"x":371,"y":106},{"type":"mousemove","time":1610,"x":371,"y":107},{"type":"mousemove","time":1825,"x":371,"y":105},{"type":"mousemove","time":2041,"x":371,"y":104},{"type":"mousemove","time":2268,"x":371,"y":112},{"type":"mousemove","time":2475,"x":365,"y":235},{"type":"mousemove","time":2684,"x":353,"y":299},{"type":"mousemove","time":2891,"x":348,"y":321},{"type":"mousemove","time":3109,"x":341,"y":338},{"type":"mousemove","time":3417,"x":341,"y":340},{"type":"mousemove","time":3617,"x":328,"y":375},{"type":"mousemove","time":3818,"x":324,"y":395},{"type":"mousemove","time":4025,"x":317,"y":428},{"type":"mousemove","time":4242,"x":311,"y":455},{"type":"mousemove","time":4367,"x":311,"y":455},{"type":"mousemove","time":4575,"x":310,"y":455},{"type":"mousemove","time":5002,"x":310,"y":453},{"type":"mousemove","time":5211,"x":314,"y":429},{"type":"mousemove","time":5417,"x":316,"y":419},{"type":"mousemove","time":5618,"x":289,"y":472},{"type":"mousemove","time":5827,"x":287,"y":475},{"type":"mousedown","time":5865,"x":287,"y":475},{"type":"mouseup","time":5884,"x":287,"y":475},{"time":5885,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6669,"x":288,"y":474},{"type":"mousemove","time":6877,"x":363,"y":432},{"type":"mousemove","time":7084,"x":519,"y":321},{"type":"mousemove","time":7284,"x":558,"y":300},{"type":"mousemove","time":7484,"x":415,"y":340},{"type":"mousemove","time":7684,"x":359,"y":368},{"type":"mousemove","time":7891,"x":355,"y":373},{"type":"mousemove","time":8752,"x":355,"y":377},{"type":"mousemove","time":8952,"x":350,"y":532},{"type":"mousemove","time":9167,"x":342,"y":595},{"type":"mousemove","time":9367,"x":342,"y":592},{"type":"mousemove","time":9567,"x":344,"y":589},{"type":"mousedown","time":9596,"x":344,"y":589},{"type":"mouseup","time":9605,"x":344,"y":589},{"time":9606,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10335,"x":344,"y":581},{"type":"mousemove","time":10547,"x":344,"y":542},{"type":"mousemove","time":10751,"x":314,"y":490},{"type":"mousemove","time":10960,"x":311,"y":484},{"type":"mousemove","time":11067,"x":311,"y":485}],"scrollY":1284,"scrollX":0,"timestamp":1587492664316}] \ No newline at end of file -- GitLab