Merge pull request #13170 from apache/dirty-rect

feat(dirty-rect): Using dirty rectangles to render charts

src/echarts.ts

@@ -333,6 +333,7 @@ class ECharts extends Eventful {
             locale?: string | LocaleOption,
             renderer?: RendererType,
             devicePixelRatio?: number,
+            useDirtyRect?: boolean,
             width?: number,
             height?: number
         }
@@ -348,18 +349,27 @@ class ECharts extends Eventful {
 
         this._dom = dom;
 
+        const root = (
+            typeof window === 'undefined' ? global : window
+        ) as any;
+
         let defaultRenderer = 'canvas';
+        let defaultUseDirtyRect = false;
         if (__DEV__) {
-            defaultRenderer = ((
-                typeof window === 'undefined' ? global : window
-            ) as any).__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+            defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+
+            const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
+            defaultUseDirtyRect = devUseDirtyRect == null
+                ? defaultUseDirtyRect
+                : devUseDirtyRect;
         }
 
         const zr = this._zr = zrender.init(dom, {
             renderer: opts.renderer || defaultRenderer,
             devicePixelRatio: opts.devicePixelRatio,
             width: opts.width,
-            height: opts.height
+            height: opts.height,
+            useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect
         });
 
         // Expect 60 fps.

test/lib/caseFrame.css

@@ -35,7 +35,7 @@
 }
 .case-frame .cases-list ul {
     padding-left: 32px;
-    margin-top: 130px;
+    margin-top: 170px;
     list-style-type: decimal;
 }
 .case-frame .info-panel {
@@ -54,10 +54,7 @@
     text-decoration: underline;
 }
 .case-frame .info-panel .renderer-selector {
-    height: 40px;
-    line-height: 40px;
-}
-.case-frame .info-panel .dist-selector {
+    margin: 10px;
 }
 .case-frame .info-panel .list-filter {
     margin: 10px 0;

test/lib/caseFrame.js

@@ -40,8 +40,15 @@
         '    <div class="info-panel">',
         '        <input class="current" />',
         '        <div class="renderer-selector">',
-        '            <input type="radio" value="canvas" name="renderer" /> CANVAS ',
-        '            <input type="radio" value="svg" name="renderer" /> SVG ',
+        '            <div class="render-selector-item">',
+        '               <input type="radio" value="canvas" name="renderer" /> CANVAS ',
+        '            </div>',
+        '           <div class="render-selector-item">',
+        '               <input type="radio" value="dirty-rect" name="renderer" /> CANVAS (dirty rect) ',
+        '            </div>',
+    '                <div class="render-selector-item">',
+        '               <input type="radio" value="svg" name="renderer" /> SVG ',
+        '            </div>',
         '        </div>',
         '        <div class="list-filter"></div>',
         '        <select class="dist-selector">',
@@ -107,13 +114,23 @@
         });
 
         rendererSelector.off('click').on('click', function (e) {
-            setState('renderer', e.target.value);
+            if (e.target.value === 'dirty-rect') {
+                setState('renderer', 'canvas');
+                setState('useDirtyRect', true);
+            }
+            else {
+                setState('renderer', e.target.value);
+                setState('useDirtyRect', false);
+            }
         });
 
         var renderer = getState('renderer');
+        var useDirtyRect = getState('useDirtyRect');
 
         rendererSelector.each(function (index, el) {
-            el.checked = el.value === renderer;
+            el.checked = el.value === 'dirty-rect'
+                ? useDirtyRect
+                : el.value === renderer;
         });
     }
 
@@ -190,6 +207,11 @@
             var matchResult = (pageURL || '').match(/[?&]__RENDERER__=(canvas|svg)(&|$)/);
             return matchResult && matchResult[1] || 'canvas';
         },
+        // true, false
+        useDirtyRect: function (pageURL) {
+            var matchResult = (pageURL || '').match(/[?&]__USE_DIRTY_RECT__=(true|false)(&|$)/);
+            return matchResult && matchResult[1] === 'true';
+        },
         // 'dist', 'webpack', 'webpackold'
         dist: function (pageURL) {
             var matchResult = (pageURL || '').match(/[?&]__ECDIST__=(webpack-req-ec|webpack-req-eclibec|webpackold-req-ec|webpackold-req-eclibec)(&|$)/);
@@ -223,6 +245,7 @@
     function setState(prop, value) {
         var curr = {
             renderer: getState('renderer'),
+            useDirtyRect: getState('useDirtyRect'),
             dist: getState('dist'),
             pagePath: getState('pagePath'),
             listFilterName: getState('listFilterName')
@@ -237,6 +260,7 @@
     function makePageURL(curr) {
         return curr.pagePath + '?' + [
             '__RENDERER__=' + curr.renderer,
+            '__USE_DIRTY_RECT__=' + curr.useDirtyRect,
             '__ECDIST__=' + curr.dist,
             '__FILTER__=' + curr.listFilterName
         ].join('&');

test/lib/config.js

@@ -35,6 +35,9 @@
     if (params.__RENDERER__) {
         window.__ECHARTS__DEFAULT__RENDERER__ = params.__RENDERER__;
     }
+    if (params.__USE_DIRTY_RECT__) {
+        window.__ECHARTS__DEFAULT__USE_DIRTY_RECT__ = params.__USE_DIRTY_RECT__ === 'true';
+    }
 
     // Set echarts source code.
     var ecDistPath;