Use lazyUpdate to optimize for the case which setOption frequently in one frame.

31ff1571 · lang · c7c10e9b · 31ff1571 · 31ff1571
隐藏空白更改
内联并排

Showing with 154 addition and 6 deletion

src/echarts.js src/echarts.js +31 -6

test/lazyUpdate.html test/lazyUpdate.html +123 -0

未找到文件。
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -182,10 +182,31 @@ define(function (require) {
        }
        timsort(visualFuncs, prioritySortFunc);
        timsort(dataProcessorFuncs, prioritySortFunc);
+
+        /**
+         * @private
+         * @type {boolean}
+         */
+        this._optionUpdated;
+
+        this._zr.animation.on('frame', this._onframe, this);
    }

    var echartsProto = ECharts.prototype;

+    echartsProto._onframe = function () {
+        // Lazy update
+        if (this._optionUpdated) {
+
+            this[IN_MAIN_PROCESS] = true;
+
+            updateMethods.prepareAndUpdate.call(this);
+
+            this[IN_MAIN_PROCESS] = false;
+
+            this._optionUpdated = false;
+        }
+    };
    /**
     * @return {HTMLDomElement}
     */
@@ -203,9 +224,9 @@ define(function (require) {
    /**
     * @param {Object} option
     * @param {boolean} notMerge
-     * @param {boolean} [notRefreshImmediately=false] Useful when setOption frequently.
+     * @param {boolean} [lazyUpdate=false] Useful when setOption frequently.
     */
-    echartsProto.setOption = function (option, notMerge, notRefreshImmediately) {
+    echartsProto.setOption = function (option, notMerge, lazyUpdate) {
        if (__DEV__) {
            zrUtil.assert(!this[IN_MAIN_PROCESS], '`setOption` should not be called during main process.');
        }
@@ -221,13 +242,17 @@ define(function (require) {

        this._model.setOption(option, optionPreprocessorFuncs);

-        updateMethods.prepareAndUpdate.call(this);
+        if (lazyUpdate) {
+            this._optionUpdated = true;
+        }
+        else {
+            updateMethods.prepareAndUpdate.call(this);
+            this._zr.refreshImmediately();
+        }

        this[IN_MAIN_PROCESS] = false;

        this._flushPendingActions();
-
-        !notRefreshImmediately && this._zr.refreshImmediately();
    };

    /**
@@ -1001,7 +1026,7 @@ define(function (require) {
     * Clear
     */
    echartsProto.clear = function () {
-        this.setOption({}, true);
+        this.setOption({ series: [] }, true);
    };
    /**
     * Dispose instance

--- a/test/lazyUpdate.html
+++ b/test/lazyUpdate.html
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <link rel="stylesheet" href="reset.css">
+    </head>
+    <body>
+        <style>
+        </style>
+        <div id="main"></div>
+
+        <script>
+
+            // Schema:
+            // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
+            var schema = [
+                {name: 'date', index: 0, text: '日期'},
+                {name: 'AQIindex', index: 1, text: 'AQI指数'},
+                {name: 'PM25', index: 2, text: 'PM2.5'},
+                {name: 'PM10', index: 3, text: 'PM10'},
+                {name: 'CO', index: 4, text: '一氧化碳 (CO)'},
+                {name: 'NO2', index: 5, text: '二氧化氮 (NO2)'},
+                {name: 'SO2', index: 6, text: '二氧化硫 (SO2)'}
+            ];
+
+            require([
+                'data/aqi/BJdata',
+                'data/aqi/GZdata',
+                'data/aqi/SHdata',
+                'echarts',
+                'echarts/chart/scatter'
+            ], function (dataBJ, dataGZ, dataSH, echarts) {
+
+                var chart = echarts.init(document.getElementById('main'));
+
+                var dimSize = 6;
+                var nameList = ['北京', '广州', '上海'];
+
+                var color = ['#5793f3', '#d14a61', '#fd9c35'];
+
+                function update(isLazy) {
+                    var idx = 0;
+                    for (var i = 1; i < dimSize; i++) {
+                        for (var j = 1; j < dimSize; j++) {
+                            var id = i + '-' + j;
+
+                            chart.setOption({
+                                grid: [{
+                                    id: id,
+                                    left: ((i - 1) / dimSize * 100 + 7) + '%',
+                                    top: ((j - 1) / dimSize * 100 + 7) + '%',
+                                    width: '15%',
+                                    height: '15%'
+                                }],
+                                xAxis: [{
+                                    id: id,
+                                    gridIndex: idx,
+                                    axisLabel: {
+                                        show: j === dimSize - 1
+                                    },
+                                    axisTick: {
+                                        show: j === dimSize - 1
+                                    },
+                                    // name: j === dimSize - 1 ? schema[i].text : '',
+                                    nameLocation: 'middle',
+                                    nameGap: 30,
+                                    splitNumber: 3
+                                }],
+                                yAxis: [{
+                                    id: id,
+                                    gridIndex: idx,
+                                    axisLabel: {
+                                        show: i === 1
+                                    },
+                                    axisTick: {
+                                        show: i === 1
+                                    },
+                                    // name: i === 1 ? schema[j].text : '',
+                                    nameLocation: 'middle',
+                                    nameGap: 30,
+                                    splitNumber: 4
+                                }],
+                                series: [dataBJ, dataGZ, dataSH].map(function (data, dataIdx) {
+                                    return {
+                                        id: id + '-' + dataIdx,
+                                        hoverAnimation: false,
+                                        // name: nameList[dataIdx],
+                                        type: 'scatter',
+                                        xAxisIndex: idx,
+                                        yAxisIndex: idx,
+                                        data: data.map(function (item) {
+                                            return [item[i], item[j]];
+                                        }),
+                                        itemStyle: {
+                                            normal: {
+                                                color: color[dataIdx]
+                                            }
+                                        }
+                                    };
+                                })
+                            }, false, isLazy);
+
+                            idx++;
+                        }
+                    }
+                }
+
+                console.time('update immediate');
+                update(false);
+                console.timeEnd('update immediate');
+
+                chart.clear();
+                setTimeout(function () {
+                    console.time('update lazy');
+                    update(true);
+                    console.timeEnd('update lazy');
+                }, 1000);
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file