treemap

src/chart/treemap/TreemapLayout.js

@@ -74,19 +74,19 @@ define(function (require) {
                 }, true);
             }
 
-            var itemModel = node.getItemModel();
-
             // Considering border and gap
-            // ????? borderWidth gapwidth在每个层级中定义。
-            var borderWidth = itemModel.get('itemStyle.normal.borderWidth');
-            var halfGapWidth = itemModel.get('itemStyle.normal.gapWidth') / 2;
+            var borderWidth = node.modelGet('itemStyle.normal.borderWidth');
+            var halfGapWidth = node.modelGet('itemStyle.normal.gapWidth') / 2;
             var layoutOffset = borderWidth - halfGapWidth;
+
+console.log(borderWidth, halfGapWidth, layoutOffset);
+
             width -= 2 * layoutOffset;
             height -= 2 * layoutOffset;
 
             node.setLayout({borderWidth: borderWidth}, true);
 
-            var viewChildren = initChildren(node, width, height, itemModel, options);
+            var viewChildren = initChildren(node, width, height, options);
 
             if (!viewChildren.length) {
                 return;
@@ -136,7 +136,7 @@ define(function (require) {
     /**
      * Set area to each child.
      */
-    function initChildren(node, width, height, itemModel, options) {
+    function initChildren(node, width, height, options) {
         var viewChildren = node.children || [];
 
         // Sort children, order by desc.
@@ -160,7 +160,7 @@ define(function (require) {
         // Filter by thredshold.
         for (var i = viewChildren.length - 1; i >= 0; i--) {
             var value = viewChildren[i].getValue();
-            if (value / sum * totalArea < itemModel.get('itemStyle.normal.visibleMin')) {
+            if (value / sum * totalArea < node.modelGet('itemStyle.normal.visibleMin')) {
                 viewChildren.slice(i, 1);
                 sum -= value;
             }

src/chart/treemap/TreemapSeries.js

@@ -3,6 +3,7 @@ define(function(require) {
     var SeriesModel = require('../../model/Series');
     var Tree = require('../../data/Tree');
     var zrUtil = require('zrender/core/util');
+    var Model = require('../../model/Model');
 
     return SeriesModel.extend({
 
@@ -75,12 +76,19 @@ define(function(require) {
          * @override
          */
         getInitialData: function (option, ecModel) {
-            var data = option.data;
-            data = data || [];
+            var data = option.data || [];
 
             completeTreeValue(data);
 
-            return Tree.createTree(data, this).list;
+            // FIXME
+            // sereis.mergeOption 的 getInitData是否放在merge后，从而能直接获取merege后的结果而非手动判断。
+            var levels = option.levels || (this.option || {}).levels || [];
+            var levelModels = [];
+            zrUtil.each(levels, function (levelDefine) {
+                levelModels.push(new Model(levelDefine));
+            }, this);
+
+            return Tree.createTree(data, this, levelModels).list;
         },
 
         /**
@@ -105,9 +113,11 @@ define(function(require) {
         var sum = 0;
 
         zrUtil.each(data, function (dataItem) {
+            var isArrayValue = zrUtil.isArray(dataItem.value);
             var itemValue = dataItem.value;
-            var children = dataItem.children;
+            isArrayValue && (itemValue = itemValue[0]);
 
+            var children = dataItem.children;
             if (children && (itemValue == null || isNaN(itemValue))) {
                 itemValue = completeTreeValue(children);
             }
@@ -117,7 +127,10 @@ define(function(require) {
                 itemValue = 0;
             }
 
-            dataItem.value = itemValue;
+            isArrayValue
+                ? (dataItem.value[0] = itemValue)
+                : (dataItem.value = itemValue);
+
             sum += itemValue;
         });
 

src/chart/treemap/TreemapView.js

@@ -55,11 +55,8 @@ define(function(require) {
             group.position = [layout.x, layout.y];
 
             // Background
-            var itemModel = node.getItemModel();
-            // FIXME
-            // levels configuration ?????
-            var borderColor = itemModel.get('itemStyle.normal.borderColor')
-                || itemModel.get('itemStyle.normal.gapColor');
+            var borderColor = node.modelGet('itemStyle.normal.borderColor')
+                || node.modelGet('itemStyle.normal.gapColor');
             group.add(new Rect({
                 shape: {x: 0, y: 0, width: thisWidth, height: thisHeight},
                 style: {fill: borderColor}

src/chart/treemap/treemapVisual.js

@@ -25,9 +25,7 @@ define(function (require) {
     };
 
     function travelTree(node, designatedVisual, seriesModel) {
-        var itemModel = node.getItemModel();
-
-        var visuals = buildVisuals(node, itemModel, designatedVisual, seriesModel);
+        var visuals = buildVisuals(node, designatedVisual, seriesModel);
 
         var viewChildren = node.viewChildren;
 
@@ -36,23 +34,23 @@ define(function (require) {
             node.setVisual('color', calculateColor(visuals, node));
         }
         else {
-            var mappingWrap = buildVisualMapping(visuals, itemModel, viewChildren);
+            var mappingWrap = buildVisualMapping(node, visuals, viewChildren);
             // Designate visual to children.
             zrUtil.each(viewChildren, function (child, index) {
-                var childVisual = mapVisual(visuals, child, index, itemModel, mappingWrap);
+                var childVisual = mapVisual(node, visuals, child, index, mappingWrap);
                 travelTree(child, childVisual, seriesModel);
             });
         }
     }
 
-    function buildVisuals(node, itemModel, designatedVisual, seriesModel) {
+    function buildVisuals(node, designatedVisual, seriesModel) {
         var visuals = zrUtil.extend({}, designatedVisual);
 
         zrUtil.each(VISUAL_LIST, function (visualName) {
             // Priority: thisNode > thisLevel > parentNodeDesignated
             var path = 'itemStyle.normal.' + visualName;
 
-            var visualValue = itemModel.get(path, true); // Ignore parent
+            var visualValue = node.modelGet(path); // Ignore parent
 
             if (visualValue == null) {
                 visualValue = retrieve(path, seriesModel.option.levels[node.depth]);
@@ -86,7 +84,7 @@ define(function (require) {
         }
     }
 
-    function buildVisualMapping(visuals, itemModel, viewChildren) {
+    function buildVisualMapping(node, visuals, viewChildren) {
         if (!viewChildren || !viewChildren.length) {
             return;
         }
@@ -106,14 +104,14 @@ define(function (require) {
 
         var mappingType = mappingVisualName === 'color'
             ? (
-                itemModel.get('itemStyle.normal.colorMapping') === 'byValue'
+                node.modelGet('itemStyle.normal.colorMapping') === 'byValue'
                     ? 'color' : 'colorByIndex'
             )
             : mappingVisualName;
 
         var dataExtent = mappingType === 'colorByIndex'
             ? null
-            : calculateDataExtent(itemModel, viewChildren);
+            : calculateDataExtent(node, viewChildren);
 
         return {
             mapping: new VisualMapping({
@@ -126,8 +124,8 @@ define(function (require) {
         };
     }
 
-    function calculateDataExtent(itemModel, viewChildren) {
-        var dimension = itemModel.get('colorDimension');
+    function calculateDataExtent(node, viewChildren) {
+        var dimension = node.modelGet('colorDimension');
 
         // The same as area dimension.
         if (dimension === 'value') {
@@ -147,13 +145,13 @@ define(function (require) {
         }
     }
 
-    function mapVisual(visuals, child, index, itemModel, mappingWrap) {
+    function mapVisual(node, visuals, child, index, mappingWrap) {
         var childVisuals = zrUtil.extend({}, visuals);
 
         if (mappingWrap) {
             var mapping = mappingWrap.mapping;
             var value = mapping.type === 'colorByIndex'
-                ? index : child.getValue(itemModel.get('colorDimension'));
+                ? index : child.getValue(node.modelGet('colorDimension'));
 
             childVisuals[mappingWrap.visualName] = mapping.mapValueToVisual(value);
         }

src/data/Tree.js

@@ -174,8 +174,20 @@ define(function(require) {
         /**
          * @return {module:echarts/model/Model}
          */
-        getItemModel: function () {
-            return this.hostTree.list.getItemModel(this.dataIndex);
+        modelGet: function (path) {
+            var itemModel = this.hostTree.list.getItemModel(this.dataIndex);
+            var parentModel = itemModel.parentModel;
+            var levelModel = (this.levelModels || [])[this.depth];
+
+            var value = itemModel.get(path, true);
+            if (value == null && levelModel) {
+                value = levelModel.get(path, true);
+            }
+            if (value == null && parentModel) {
+                value = parentModel.get(path);
+            }
+
+            return value;
         },
 
         /**
@@ -201,8 +213,9 @@ define(function(require) {
      * @constructor
      * @alias module:echarts/data/Tree
      * @param {string=} name Root name
+     * @param {Array.<modules:echarts/model/Model>} levelModels
      */
-    function Tree(name) {
+    function Tree(name, levelModels) {
         /**
          * @type {module:echarts/data/Tree~TreeNode}
          * @readOnly
@@ -220,6 +233,12 @@ define(function(require) {
          * @type {Array.<module:echarts/data/Tree~TreeNode}
          */
         this._nodes = [];
+
+        /**
+         * @private
+         * @readOnly
+         */
+        this.levelModels = levelModels;
     }
 
     Tree.prototype = {
@@ -296,12 +315,13 @@ define(function(require) {
      * @static
      * @param {Array.<Object>} data
      * @param {module:echarts/model/Model} hostModel
+     * @param {Array.<module:echarts/model/Model} levelModels
      * @return module:echarts/data/Tree
      */
-    Tree.createTree = function (data, hostModel) {
+    Tree.createTree = function (data, hostModel, levelModels) {
         var listData = [];
 
-        var tree = new Tree();
+        var tree = new Tree('', levelModels);
         var rootNode = tree.root;
 
         function buildHierarchy(dataNode, parentNode) {

test/treemap-obama.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="main"></div>
+
+        <script src="data/obama_budget_proposal_2012.tree.js"></script>
+
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/treemap',
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                chart.setOption({
+
+                    series: [
+                        {
+                            name:'Obama’s 2012 Budget Proposal: How $3.7 Trillion is Spent',
+                            type:'treemap',
+                            label: {
+                                show: true,
+                                formatter: "{b}"
+                            },
+                            itemStyle: {
+                                normal: {
+                                    borderColor: 'black'
+                                },
+                                emphasis: {
+                                }
+                            },
+                            levels: [
+                                {
+                                },
+                                {
+                                    itemStyle: {
+                                        normal: {
+                                            gapWidth: 4,
+                                            borderColor: 'black'
+                                        },
+                                        emphasis: {
+                                        }
+                                    }
+                                }
+                            ],
+                            data: window.obama_budget_2012
+                        }
+                    ]
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file