[heatmap] support incremental rendering.

src/chart/heatmap/HeatmapView.js

@@ -77,9 +77,12 @@ export default echarts.extendChartView({
         }
 
         this.group.removeAll();
+
+        this._incrementalDisplayable = null;
+
         var coordSys = seriesModel.coordinateSystem;
         if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar') {
-            this._renderOnCartesianAndCalendar(coordSys, seriesModel, api);
+            this._renderOnCartesianAndCalendar(seriesModel, api, 0, seriesModel.getData().count());
         }
         else if (isGeoCoordSys(coordSys)) {
             this._renderOnGeo(
@@ -88,10 +91,20 @@ export default echarts.extendChartView({
         }
     },
 
-    dispose: function () {},
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        this.group.removeAll();
+    },
+
+    incrementalRender: function (params, seriesModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys) {
+            this._renderOnCartesianAndCalendar(seriesModel, api, params.start, params.end, true);
+        }
+    },
 
-    _renderOnCartesianAndCalendar: function (coordSys, seriesModel, api) {
+    _renderOnCartesianAndCalendar: function (seriesModel, api, start, end, incremental) {
 
+        var coordSys = seriesModel.coordinateSystem;
         if (coordSys.type === 'cartesian2d') {
             var xAxis = coordSys.getAxis('x');
             var yAxis = coordSys.getAxis('y');
@@ -134,7 +147,7 @@ export default echarts.extendChartView({
                 seriesModel.coordDimToDataDim('value')[0]
             ];
 
-        data.each(function (idx) {
+        for (var idx = start; idx < end; idx++) {
             var rect;
 
             if (coordSysType === 'cartesian2d') {
@@ -206,9 +219,17 @@ export default echarts.extendChartView({
             rect.setStyle(style);
             graphic.setHoverStyle(rect, data.hasItemOption ? hoverStl : zrUtil.extend({}, hoverStl));
 
+            rect.incremental = incremental;
+            // PENDING
+            if (incremental) {
+                rect.needsClear = start === 0;
+                // Rect must use hover layer if it's incremental.
+                rect.useHoverLayer = true;
+            }
+
             group.add(rect);
             data.setItemGraphicEl(idx, rect);
-        });
+        }
     },
 
     _renderOnGeo: function (geo, seriesModel, visualMapModel, api) {
@@ -272,5 +293,7 @@ export default echarts.extendChartView({
             silent: true
         });
         this.group.add(img);
-    }
+    },
+
+    dispose: function () {}
 });
\ No newline at end of file

src/util/graphic.js

@@ -21,6 +21,7 @@ import CompoundPath from 'zrender/src/graphic/CompoundPath';
 import LinearGradient from 'zrender/src/graphic/LinearGradient';
 import RadialGradient from 'zrender/src/graphic/RadialGradient';
 import BoundingRect from 'zrender/src/core/BoundingRect';
+import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
 
 
 var round = Math.round;
@@ -1073,6 +1074,7 @@ export {
     Line,
     BezierCurve,
     Arc,
+    IncrementalDisplayable,
     CompoundPath,
     LinearGradient,
     RadialGradient,

test/heatmap-large.html

@@ -39,8 +39,8 @@
                 noise.seed(Math.random());
                 function generateData(theta, min, max) {
                     var data = [];
-                    for (var i = 0; i <= 100; i++) {
-                        for (var j = 0; j <= 100; j++) {
+                    for (var i = 0; i <= 300; i++) {
+                        for (var j = 0; j <= 300; j++) {
                             // var x = (max - min) * i / 200 + min;
                             // var y = (max - min) * j / 100 + min;
                             data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5]);
@@ -70,7 +70,6 @@
                         min: 0,
                         max: 1,
                         calculable: true,
-                        realtime: false,
                         splitNumber: 8,
                         inRange: {
                             color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']