cr提到的问题

包括rect边框的配置

doc/example/treemap.html

@@ -65,7 +65,9 @@ option = {
                 normal: {
                     label: {
                         show: true
-                    }
+                    },
+                    borderWidth: 1,
+                    borderColor: '#ccc'
                 },
                 emphasis: {
                     color: '#cc99cc',
@@ -76,30 +78,37 @@ option = {
             data:[
                 {
                     name: '魅族',
+                    color: '#ccff99',
                     value: 6
                 },
                 {
                     name: '小米',
+                    color: '#99ccff',
                     value: 6
                 },
                 {
                     name: '苹果',
+                    color: '#9999cc',
                     value: 4
                 },
                 {
                     name: '三星',
+                    color: '#99cccc',
                     value: 3
                 },
                 {
                     name: '华为',
+                    color: '#ccffcc',
                     value: 2
                 },
                 {
                     name: '联想',
+                    color: '#ccccff',
                     value: 2
                 },
                 {
                     name: '中兴',
+                    color: '#ffffcc',
                     value: 1
                 }
             ]

src/chart/treemap.js

@@ -79,23 +79,23 @@ define(function (require) {
             }
             var treeMapLayout = new TreeMapLayout(
                 {
-                    areaArr: areaArr,
+                    areas: areaArr,
                     x0: this.x0,
                     y0: this.y0,
                     width0: this.width0,
-                    height0: this.height0
-                   
+                    height0: this.height0           
                 }
             );
-            var locationArr = treeMapLayout.rectangleList
+            var locationArr = treeMapLayout.rectangleList;
             for (var k = 0; k < locationArr.length; k++) {
                 var item = locationArr[k];
+                var color = this.data[k].color || this.zr.getColor(k);
                 this._buildItem(
                     item.x,
                     item.y,
                     item.width,
                     item.height,
-                    this.zr.getColor(k),
+                    color,
                     k
                 )
             };
@@ -118,7 +118,8 @@ define(function (require) {
                 y,
                 width,
                 height,
-                color
+                color,
+                this.data[index].name
             );
             // todo
             ecData.pack(
@@ -128,16 +129,6 @@ define(function (require) {
                 series[0].data[index].name
             );
             this.shapeList.push(rectangle);
-            var label = this.getLabel(
-                rectangle.style.height,
-                rectangle.style.width,
-                rectangle.style.x,
-                rectangle.style.y,
-                this.data[index].name
-            );
-            if (label) {
-                this.shapeList.push(label);
-            }
         },
 
         /**
@@ -154,7 +145,8 @@ define(function (require) {
             y,
             width,
             height,
-            color
+            color,
+            text
         ) {
             var serie = this.series[0];
             var data = this.data;
@@ -167,22 +159,32 @@ define(function (require) {
                 queryTarget,
                 'itemStyle.emphasis'
             ) || {};
-
+            var textStyle = this.getLabel(
+                x,
+                y,
+                width,
+                height,
+                text
+            );
             var emphasisColor = this.getItemStyleColor(emphasis.color, 0, 0, data)
                 || color;
+            var borderWidth = normal.borderWidth || 0;
+            var borderColor = normal.borderColor || color;
             var rectangleShape =
             {
-                zlevel: 1,
+                zlevel: this.getZlevelBase(),
                 z: 1,
                 hoverable: true,
-                style: {
+                style: $.extend({
                     x: x,
                     y: y,
                     width: width,
                     height: height,
                     brushType: 'both',
-                    color: color
-                },
+                    color: color,
+                    lineWidth: borderWidth,
+                    strokeColor: borderColor
+                }, textStyle),
                 highlightStyle: {
                     color: emphasisColor,
                     lineWidth: emphasis.borderWidth,
@@ -194,39 +196,35 @@ define(function (require) {
 
         },
         getLabel: function (
-            rectangleHeight,
-            rectangleWidth,
             rectangleX,
             rectangleY,
+            rectangleWidth,
+            rectangleHeight,
             text
         ) {
             if (!this.series[0].itemStyle.normal.label.show) {
-                return false;
+                return {};
             }
             var marginY = 12;
             var marginX = 5;
             var fontSize = 13;
             var lineWidth = text.length * 13;
-            var lineHeight = text.length * 13;
+            var lineHeight = 13;
             if (marginX + lineWidth > rectangleWidth
                 || marginY + lineHeight > rectangleHeight) {
-                return false;
+                return {};
             }
-            var textShape = {
-                zlevel: 2,
-                hoverable: false,
-                style: {
-                    x: rectangleX + marginX,
-                    y: rectangleY + marginY,
-                    text: text,
-                    textAlign: 'left',
-                    color: '#777',
-                    textFont: fontSize + 'px Arial'
-                }
-
+            var style = {
+                textX: rectangleX + marginX,
+                textY: rectangleY + marginY,
+                text: text,
+                textPosition: 'specific',
+                textColor: '#777',
+                textFont: fontSize + 'px Arial'
             };
-            return new TextShape(textShape);
+            return style;
         },
+
         /**
          * 刷新
          */

src/layout/TreeMap.js

@@ -9,7 +9,7 @@ define(function (require) {
         // 包含子矩形坐标与宽高的数组
         this.rectangleList = [];
         /**
-         * areaArr 每个子矩形面积
+         * areas 每个子矩形面积
          * x0 父矩形横坐标
          * y0 父矩形横坐标
          * width0 父矩形宽
@@ -22,11 +22,11 @@ define(function (require) {
             height: opts.height0
         };
         this.squarify(
-            opts.areaArr,
+            opts.areas,
             row
         );
     }
-    TreeMapLayout.prototype.squarify = function (areaArr, row) {
+    TreeMapLayout.prototype.squarify = function (areas, row) {
         var layoutDirection = 'VERTICAL';
         var width = row.width;
         var height = row.height;
@@ -37,7 +37,7 @@ define(function (require) {
         }
         // 把考虑方向与位置的因素剥离出来，只考虑怎么排列，运行完毕之后再修正
         var shapeArr = this.getShapeListInAbstractRow(
-            areaArr, width, height
+            areas, width, height
         );
         // 首先换算出虚拟的x、y坐标
         for (var i = 0; i < shapeArr.length; i++) {
@@ -86,7 +86,7 @@ define(function (require) {
             };
         }
         // 下一步的矩形数组要剔除已经填充过的矩形
-        var nextAreaArr = areaArr.slice(shapeArr.length);
+        var nextAreaArr = areas.slice(shapeArr.length);
         if (nextAreaArr.length === 0) {
             return;
         }
@@ -98,12 +98,12 @@ define(function (require) {
         }
     };
     TreeMapLayout.prototype.getShapeListInAbstractRow = function (
-        areaArr,
+        areas,
         width,
         height
     ) {
         // 如果只剩下一个了，直接返回
-        if (areaArr.length === 1) {
+        if (areas.length === 1) {
             return [
                 {
                     width: width,
@@ -113,15 +113,15 @@ define(function (require) {
         }
         // 填充进入的个数，从填充一个开始到填充所有小矩形，
         // 纵横比最优时break并保留结果
-        for (var count = 1; count < areaArr.length; count++) {
+        for (var count = 1; count < areas.length; count++) {
 
             var shapeArr0 = this.placeFixedNumberRectangles(
-                areaArr.slice(0, count),
+                areas.slice(0, count),
                 width,
                 height
             );
             var shapeArr1 = this.placeFixedNumberRectangles(
-                areaArr.slice(0, count + 1),
+                areas.slice(0, count + 1),
                 width,
                 height
             );