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

@@ -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 () {

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];

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
         )

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,

test/runTest/actions/treemap-action.json

+[{"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