markArea updateLayout

src/component/marker/MarkAreaModel.js

@@ -6,7 +6,7 @@ define(function (require) {
 
         defaultOption: {
             zlevel: 0,
-            z: 1,
+            z: 5,
             tooltip: {
                 trigger: 'item'
             },
@@ -24,7 +24,7 @@ define(function (require) {
             },
             itemStyle: {
                 normal: {
-                    opacity: 0.5
+                    opacity: 0.4
                 }
             }
         }

src/component/marker/MarkAreaView.js

@@ -118,6 +118,9 @@ define(function (require) {
 
         return point;
     }
+
+    var dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']];
+
     require('./MarkerView').extend({
 
         type: 'markArea',
@@ -126,7 +129,16 @@ define(function (require) {
             ecModel.eachSeries(function (seriesModel) {
                 var maModel = seriesModel.markAreaModel;
                 if (maModel) {
-                    // TODO
+                    var areaData = maModel.getData();
+                    areaData.each(function (idx) {
+                        var points = zrUtil.map(dimPermutations, function (dim) {
+                            return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
+                        });
+                        // Layout
+                        areaData.setItemLayout(idx, points);
+                        var el = areaData.getItemGraphicEl(idx);
+                        el.setShape('points', points);
+                    });
                 }
             }, this);
         },
@@ -151,7 +163,6 @@ define(function (require) {
             // Line data for tooltip and formatter
             maModel.setData(areaData);
 
-            var dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']];
             // Update visual and layout of line
             areaData.each(function (idx) {
                 // Layout