This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch remove-component
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit 7606cb72b155a994584c7d0ff704541f27ff244c
Author: 100pah <sushuang0...@gmail.com>
AuthorDate: Fri Jul 17 02:06:47 2020 +0800

    fix: fix feature reproduce and complete test case.
---
 src/model/Global.ts                |   7 +-
 src/model/OptionManager.ts         |  12 +-
 src/preprocessor/backwardCompat.ts |   2 +-
 src/util/model.ts                  |  90 ++++--
 test/dataZoom-feature.html         | 564 ++++++++++++++++++++++++++++---------
 test/option-replaceMerge.html      | 101 ++-----
 6 files changed, 539 insertions(+), 237 deletions(-)

diff --git a/src/model/Global.ts b/src/model/Global.ts
index 93b674d..6328032 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -272,8 +272,11 @@ class GlobalModel extends Model<ECUnitOption> {
             );
 
             const oldCmptList = componentsMap.get(mainType);
-            const mergeMode = (replaceMergeMainTypeMap && 
replaceMergeMainTypeMap.get(mainType))
-                ? 'replaceMerge' : 'normalMerge';
+            const mergeMode =
+                // `!oldCmptList` means init. See the comment in 
`mappingToExists`
+                  !oldCmptList ? 'replaceAll'
+                : (replaceMergeMainTypeMap && 
replaceMergeMainTypeMap.get(mainType)) ? 'replaceMerge'
+                : 'normalMerge';
             const mappingResult = modelUtil.mappingToExists(oldCmptList, 
newCmptOptionList, mergeMode);
 
             // Set mainType and complete subType.
diff --git a/src/model/OptionManager.ts b/src/model/OptionManager.ts
index 17d3767..33f0742 100644
--- a/src/model/OptionManager.ts
+++ b/src/model/OptionManager.ts
@@ -22,17 +22,19 @@
  */
 
 
-import ComponentModel, { ComponentModelConstructor } from './Component';
+// import ComponentModel, { ComponentModelConstructor } from './Component';
 import ExtensionAPI from '../ExtensionAPI';
 import {
-    OptionPreprocessor, MediaQuery, ECUnitOption, MediaUnit, ECOption, 
SeriesOption, ComponentOption
+    OptionPreprocessor, MediaQuery, ECUnitOption, MediaUnit, ECOption, 
SeriesOption
 } from '../util/types';
 import GlobalModel, { InnerSetOptionOpts } from './Global';
 import {
-    MappingExistingItem, normalizeToArray, setComponentTypeToKeyInfo, 
mappingToExists
+    normalizeToArray
+    // , MappingExistingItem, setComponentTypeToKeyInfo, mappingToExists
 } from '../util/model';
 import {
-    each, clone, map, merge, isTypedArray, setAsPrimitive, HashMap, 
createHashMap, extend
+    each, clone, map, isTypedArray, setAsPrimitive
+    // , HashMap , createHashMap, extend, merge,
 } from 'zrender/src/core/util';
 
 const QUERY_REG = /^(min|max)?(.+)$/;
@@ -45,7 +47,7 @@ interface ParsedRawOption {
 }
 
 // Key: mainType
-type FakeComponentsMap = HashMap<(MappingExistingItem & { subType: string 
})[]>;
+// type FakeComponentsMap = HashMap<(MappingExistingItem & { subType: string 
})[]>;
 
 /**
  * TERM EXPLANATIONS:
diff --git a/src/preprocessor/backwardCompat.ts 
b/src/preprocessor/backwardCompat.ts
index f710dcc..5e112f6 100644
--- a/src/preprocessor/backwardCompat.ts
+++ b/src/preprocessor/backwardCompat.ts
@@ -58,7 +58,7 @@ function set(opt: Dictionary<any>, path: string, val: any, 
overwrite?: boolean)
 }
 
 function compatLayoutProperties(option: Dictionary<any>) {
-    each(LAYOUT_PROPERTIES, function (prop) {
+    option && each(LAYOUT_PROPERTIES, function (prop) {
         if (prop[0] in option && !(prop[1] in option)) {
             option[prop[1]] = option[prop[0]];
         }
diff --git a/src/util/model.ts b/src/util/model.ts
index 6225339..5cf3568 100644
--- a/src/util/model.ts
+++ b/src/util/model.ts
@@ -162,17 +162,15 @@ export interface MappingExistingItem {
 type MappingResult<T> = MappingResultItem<T>[];
 interface MappingResultItem<T extends MappingExistingItem = 
MappingExistingItem> {
     // Existing component instance.
-    existing?: T;
+    existing: T;
     // The mapped new component option.
-    newOption?: ComponentOption;
+    newOption: ComponentOption;
     // Mark that the new component has nothing to do with any of the old 
components.
     // So they won't share view. Also see `__requireNewView`.
-    brandNew?: boolean;
-    // id?: string;
-    // name?: string;
+    brandNew: boolean;
     // keyInfo for new component.
     // All of them will be assigned to a created component instance.
-    keyInfo?: {
+    keyInfo: {
         name: string,
         id: string,
         mainType: ComponentMainType,
@@ -180,6 +178,8 @@ interface MappingResultItem<T extends MappingExistingItem = 
MappingExistingItem>
     };
 }
 
+type MappingToExistsMode = 'normalMerge' | 'replaceMerge' | 'replaceAll';
+
 /**
  * Mapping to existings for merge.
  *
@@ -198,22 +198,31 @@ interface MappingResultItem<T extends MappingExistingItem 
= MappingExistingItem>
  *     That means their might be "hole" after the removal.
  *     The new components are created first at those available index.
  *
+ * Mode "replaceAll":
+ *     This mode try to support that reproduce an echarts instance from another
+ *     echarts instance (via `getOption`) in some simple cases.
+ *     In this senario, the `result` index are exactly the consistent with the 
`newCmptOptions`,
+ *     which ensures the compoennt index referring (like `xAxisIndex: ?`) 
corrent. That is,
+ *     the "hole" in `newCmptOptions` will also be kept.
+ *     On the contrary, other modes try best to eliminate holes.
+ *     PENDING: This is an experimental mode yet.
+ *
  * @return See the comment of <MappingResult>.
  */
 export function mappingToExists<T extends MappingExistingItem>(
     existings: T[],
     newCmptOptions: ComponentOption[],
-    mode: 'normalMerge' | 'replaceMerge'
+    mode: MappingToExistsMode
 ): MappingResult<T> {
 
-    const result: MappingResultItem<T>[] = [];
+    const isNormalMergeMode = mode === 'normalMerge';
     const isReplaceMergeMode = mode === 'replaceMerge';
+    const isReplaceAllMode = mode === 'replaceAll';
     existings = existings || [];
     newCmptOptions = (newCmptOptions || []).slice();
     const existingIdIdxMap = createHashMap<number>();
 
-    prepareResult(result, existings, existingIdIdxMap, isReplaceMergeMode);
-
+    // Validate id and name on user input option.
     each(newCmptOptions, function (cmptOption, index) {
         if (!isObject<ComponentOption>(cmptOption)) {
             newCmptOptions[index] = null;
@@ -223,13 +232,22 @@ export function mappingToExists<T extends 
MappingExistingItem>(
         cmptOption.name == null || validateIdOrName(cmptOption.name);
     });
 
-    mappingById(result, existings, existingIdIdxMap, newCmptOptions);
+    const result = prepareResult(existings, existingIdIdxMap, mode);
+
+    if (isNormalMergeMode || isReplaceMergeMode) {
+        mappingById(result, existings, existingIdIdxMap, newCmptOptions);
+    }
 
-    if (!isReplaceMergeMode) {
+    if (isNormalMergeMode) {
         mappingByName(result, newCmptOptions);
     }
 
-    mappingByIndex(result, newCmptOptions, isReplaceMergeMode);
+    if (isNormalMergeMode || isReplaceMergeMode) {
+        mappingByIndex(result, newCmptOptions, isReplaceMergeMode);
+    }
+    else if (isReplaceAllMode) {
+        mappingInReplaceAllMode(result, newCmptOptions);
+    }
 
     makeIdAndName(result);
 
@@ -239,11 +257,16 @@ export function mappingToExists<T extends 
MappingExistingItem>(
 }
 
 function prepareResult<T extends MappingExistingItem>(
-    result: MappingResult<T>,
     existings: T[],
     existingIdIdxMap: HashMap<number>,
-    isReplaceMergeMode: boolean
-) {
+    mode: MappingToExistsMode
+): MappingResultItem<T>[] {
+    const result: MappingResultItem<T>[] = [];
+
+    if (mode === 'replaceAll') {
+        return result;
+    }
+
     // Do not use native `map` to in case that the array `existings`
     // contains elided items, which will be ommited.
     for (let index = 0; index < existings.length; index++) {
@@ -258,11 +281,15 @@ function prepareResult<T extends MappingExistingItem>(
         // For internal-components:
         //     go with "replaceMerge" approach in both mode.
         result.push({
-            existing: (isReplaceMergeMode || isComponentIdInternal(existing))
+            existing: (mode === 'replaceMerge' || 
isComponentIdInternal(existing))
                 ? null
-                : existing
+                : existing,
+            newOption: null,
+            keyInfo: null,
+            brandNew: null
         });
     }
+    return result;
 }
 
 function mappingById<T extends MappingExistingItem>(
@@ -323,7 +350,7 @@ function mappingByName<T extends MappingExistingItem>(
 function mappingByIndex<T extends MappingExistingItem>(
     result: MappingResult<T>,
     newCmptOptions: ComponentOption[],
-    isReplaceMergeMode: boolean
+    brandNew: boolean
 ): void {
     let nextIdx = 0;
     each(newCmptOptions, function (cmptOption) {
@@ -358,15 +385,36 @@ function mappingByIndex<T extends MappingExistingItem>(
 
         if (resultItem) {
             resultItem.newOption = cmptOption;
-            resultItem.brandNew = isReplaceMergeMode;
+            resultItem.brandNew = brandNew;
         }
         else {
-            result.push({ newOption: cmptOption, brandNew: isReplaceMergeMode 
});
+            result.push({
+                newOption: cmptOption,
+                brandNew: brandNew,
+                existing: null,
+                keyInfo: null
+            });
         }
         nextIdx++;
     });
 }
 
+function mappingInReplaceAllMode<T extends MappingExistingItem>(
+    result: MappingResult<T>,
+    newCmptOptions: ComponentOption[]
+): void {
+    each(newCmptOptions, function (cmptOption) {
+        // The feature "reproduce" requires "hole" will also reproduced
+        // in case that compoennt index referring are broken.
+        result.push({
+            newOption: cmptOption,
+            brandNew: true,
+            existing: null,
+            keyInfo: null
+        });
+    });
+}
+
 /**
  * Make id and name for mapping result (result of mappingToExists)
  * into `keyInfo` field.
diff --git a/test/dataZoom-feature.html b/test/dataZoom-feature.html
index 9d42ccc..fd9e788 100644
--- a/test/dataZoom-feature.html
+++ b/test/dataZoom-feature.html
@@ -38,8 +38,10 @@ under the License.
 
 
         <div id="refer_by_id"></div>
-        <div id="auto_axis_second_setOption_normal_dz"></div>
         <div id="auto_axis_second_setOption_only_toolbox_dz"></div>
+        <div id="auto_axis_second_setOption_normal_dz"></div>
+        <div id="specified_axis_second_setOption_normal_dz"></div>
+        <div id="remove_dz"></div>
 
 
 
@@ -93,7 +95,7 @@ under the License.
             var chart = testHelper.create(echarts, 'refer_by_id', {
                 title: [
                     'refer axis by id',
-                    'Two grids, dataZoom should **only refer to the bottom 
grid**',
+                    'Two grids, dataZoom should **only refer to bottom grid**',
                 ],
                 option: option,
                 height: 300,
@@ -106,32 +108,181 @@ under the License.
 
 
 
+        <script>
+        require(['echarts'], function (echarts) {
+            function makeFirstGridOption() {
+                return {
+                    grid: [{
+                        bottom: '60%'
+                    }],
+                    xAxis: [{
+                    }, {
+                    }],
+                    yAxis: [{
+                    }],
+                    series: [{
+                        type: 'line',
+                        data: [[333, 22], [666, 44]]
+                    }, {
+                        type: 'line',
+                        xAxisIndex: 1,
+                        data: [[88888, 52], [99999, 74]]
+                    }]
+                };
+            }
+
+            var option = makeFirstGridOption();
+
+            option.toolbox = {
+                left: 'center',
+                feature: {
+                    dataZoom: {}
+                }
+            };
+            option.grid.push(
+                {
+                    id: 'gb',
+                    top: '60%'
+                }
+            );
+            option.xAxis.push(
+                {
+                    id: 'xb0',
+                    type: 'category',
+                    gridIndex: 1
+                }, {
+                    id: 'xb1',
+                    type: 'category',
+                    gridIndex: 1
+                }
+            );
+            option.yAxis.push(
+                {
+                    id: 'yb',
+                    gridIndex: 1
+                }
+            );
+            option.series.push(
+                {
+                    id: 'sb0',
+                    type: 'line',
+                    xAxisIndex: 2,
+                    yAxisIndex: 1,
+                    data: [[63, 432], [98, 552]]
+                }, {
+                    id: 'sb1',
+                    type: 'line',
+                    xAxisIndex: 3,
+                    yAxisIndex: 1,
+                    data: [[87654, 1432], [56789, 1552]]
+                }
+            );
+
+            var chart = testHelper.create(echarts, 
'auto_axis_second_setOption_only_toolbox_dz', {
+                title: [
+                    '[Only toolbox dataZoom] two grids, each has two xAxis.',
+                    'toolbox zoom should work on **all grids**.',
+                    'Click btn "remove top grid".',
+                    'toolbox zoom should work only on **bottom grids**.',
+                    'Click btn "addback top grid".',
+                    'toolbox zoom should work on **all grids**.',
+                    'Click btn "remove all grids".',
+                    'Should **no error**.',
+                    'Check toolbox zoom should **not work on the original 
area**.',
+                    'Click btn "addback top grid".',
+                    'toolbox zoom should work only on **top grids**.',
+                ],
+                option: option,
+                height: 350,
+                buttons: [{
+                    text: 'remove top grid',
+                    onclick: function () {
+                        chart.setOption({
+                            grid: [{
+                                id: 'gb',
+                            }],
+                            xAxis: [{
+                                id: 'xb0',
+                            }, {
+                                id: 'xb1',
+                            }],
+                            yAxis: [{
+                                id: 'yb'
+                            }],
+                            series: [{
+                                id: 'sb0',
+                            }, {
+                                id: 'sb1',
+                            }]
+                        }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
+                    }
+                }, {
+                    text: 'addback top grid',
+                    onclick: function () {
+                        chart.setOption(makeFirstGridOption());
+                    }
+                }, {
+                    text: 'remove all grids',
+                    onclick: function () {
+                        chart.setOption({
+                            grid: [],
+                            xAxis: [],
+                            yAxis: [],
+                            series: []
+                        }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
+                    }
+                }]
+            });
+        });
+        </script>
+
+
 
 
 
 
         <script>
         require(['echarts'], function (echarts) {
-            var option;
 
-            option = {
-                toolbox: {
-                    left: 'center',
-                    feature: {
-                        dataZoom: {}
-                    }
-                },
-                grid: [{
-                    bottom: '60%'
-                }, {
+            function makeFirstGridOption() {
+                return {
+                    grid: [{
+                        bottom: '60%'
+                    }],
+                    xAxis: [{
+                    }, {
+                    }],
+                    yAxis: [{
+                    }],
+                    series: [{
+                        type: 'line',
+                        symbolSize: 20,
+                        data: [[11, 22], [33, 44]]
+                    }, {
+                        type: 'line',
+                        xAxisIndex: 1,
+                        symbolSize: 20,
+                        data: [[11111, 52], [21133, 74]]
+                    }]
+                };
+            }
+
+            var option = makeFirstGridOption();
+
+            option.toolbox = {
+                left: 'center',
+                feature: {
+                    dataZoom: {}
+                }
+            };
+            option.grid.push(
+                {
                     id: 'gb',
                     top: '60%'
-                }],
-                xAxis: [{
-                    type: 'category'
-                }, {
-                    type: 'category'
-                }, {
+                }
+            );
+            option.xAxis.push(
+                {
                     id: 'xb0',
                     type: 'category',
                     gridIndex: 1
@@ -139,60 +290,60 @@ under the License.
                     id: 'xb1',
                     type: 'category',
                     gridIndex: 1
-                }],
-                yAxis: [{
-
-                }, {
+                }
+            );
+            option.yAxis.push(
+                {
                     id: 'yb',
                     gridIndex: 1
-                }],
-                dataZoom: [{
+                }
+            );
+            option.dataZoom = [
+                {
                     type: 'slider'
                 }, {
                     type: 'inside'
-                }],
-                series: [{
-                    type: 'line',
-                    data: [[11, 22], [33, 44]]
-                }, {
-                    type: 'line',
-                    xAxisIndex: 1,
-                    data: [[11111, 52], [21133, 74]]
-                }, {
+                }
+            ];
+            option.series.push(
+                {
                     id: 'sb0',
                     type: 'line',
+                    symbolSize: 20,
                     xAxisIndex: 2,
                     yAxisIndex: 1,
                     data: [[23, 432], [54, 552]]
                 }, {
                     id: 'sb1',
                     type: 'line',
+                    symbolSize: 20,
                     xAxisIndex: 3,
                     yAxisIndex: 1,
                     data: [[222233, 1432], [111154, 1552]]
-                }]
-            };
+                }
+            );
 
             var chart = testHelper.create(echarts, 
'auto_axis_second_setOption_normal_dz', {
                 title: [
+                    'Test: **Auto axis** remove coord sys (dataZoom not 
remove)',
                     'two grids, each has two xAxis.',
-                    'dataZoom should auto **control all of the two xAxis of 
the first** grid.',
-                    'Click btn "remove the first grid".',
-                    'dataZoom should auto **control all of the two xAxis of 
the second** grid.',
-                    '**inside dataZoom** on the first grid area **should be 
removed**.',
-                    '**toolbox zoom** should only control the second grid.',
-                    'Click btn "addback the first grid".',
-                    'dataZoom should auto **control all of the two xAxis of 
the first** grid.',
-                    '**inside dataZoom** on the second grid area **should be 
removed**.',
+                    'dataZoom should **only control all 2 xAxis of top** 
grid.',
+                    'Click btn "remove top grid".',
+                    'dataZoom should **only control all 2 xAxis of bottom** 
grid.',
+                    '**inside dataZoom** on top grid area **should be 
removed**.',
+                    '**toolbox zoom** should only control bottom grid.',
+                    'Click btn "addback top grid".',
+                    'dataZoom should **only control all 2 xAxis of top** 
grid.',
+                    '**inside dataZoom** on bottom grid area **should be 
removed**.',
                     'Click btn "remove all grids".',
                     'Should no error.',
-                    'Click btn "addback the first grid".',
+                    'Click btn "addback top grid".',
                     'Functionalities should be OK.'
                 ],
                 option: option,
                 height: 350,
                 buttons: [{
-                    text: 'remove the first grid',
+                    text: 'remove top grid',
                     onclick: function () {
                         chart.setOption({
                             grid: [{
@@ -214,26 +365,163 @@ under the License.
                         }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
                     }
                 }, {
-                    text: 'addback the first grid',
+                    text: 'addback top grid',
+                    onclick: function () {
+                        chart.setOption(makeFirstGridOption());
+                    }
+                }, {
+                    text: 'remove all grids',
+                    onclick: function () {
+                        chart.setOption({
+                            grid: [],
+                            xAxis: [],
+                            yAxis: [],
+                            series: []
+                        }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
+                    }
+                }]
+            });
+        });
+        </script>
+
+
+
+
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+
+            function makeFirstGridOption() {
+                return {
+                    grid: [{
+                        bottom: '60%'
+                    }],
+                    xAxis: [{
+                    }, {
+                    }],
+                    yAxis: [{
+                    }],
+                    series: [{
+                        type: 'line',
+                        symbol: 'emptyTriangle',
+                        symbolSize: 20,
+                        data: [[11, 22], [33, 44]]
+                    }, {
+                        type: 'line',
+                        symbol: 'emptyTriangle',
+                        symbolSize: 20,
+                        xAxisIndex: 1,
+                        data: [[11111, 52], [21133, 74]]
+                    }]
+                };
+            }
+
+            var option = makeFirstGridOption();
+
+            option.toolbox = {
+                left: 'center',
+                feature: {
+                    dataZoom: {}
+                }
+            };
+            option.grid.push(
+                {
+                    id: 'gb',
+                    top: '60%'
+                }
+            );
+            option.xAxis.push(
+                {
+                    id: 'xb0',
+                    type: 'category',
+                    gridIndex: 1
+                }, {
+                    id: 'xb1',
+                    type: 'category',
+                    gridIndex: 1
+                }
+            );
+            option.yAxis.push(
+                {
+                    id: 'yb',
+                    gridIndex: 1
+                }
+            );
+            option.dataZoom = [
+                {
+                    type: 'slider',
+                    xAxisIndex: 'all'
+                }, {
+                    type: 'inside',
+                    xAxisIndex: 'all'
+                }
+            ];
+            option.series.push(
+                {
+                    id: 'sb0',
+                    type: 'line',
+                    symbol: 'emptyTriangle',
+                    symbolSize: 20,
+                    xAxisIndex: 2,
+                    yAxisIndex: 1,
+                    data: [[23, 432], [54, 552], [124, 324], [341, 134], [888, 
213]]
+                }, {
+                    id: 'sb1',
+                    type: 'line',
+                    symbol: 'emptyTriangle',
+                    symbolSize: 20,
+                    xAxisIndex: 3,
+                    yAxisIndex: 1,
+                    data: [[222233, 1432], [111154, 1552], [222223, 1231], 
[131313, 3322], [717171, 5512]]
+                }
+            );
+
+            var chart = testHelper.create(echarts, 
'specified_axis_second_setOption_normal_dz', {
+                title: [
+                    'Test: **xAxisIndex: "all"** remove coord sys (dataZoom 
not remove)',
+                    'two grids, each has two xAxis.',
+                    'dataZoom should **only control all 4 xAxis**.',
+                    'Click btn "remove top grid".',
+                    'dataZoom should **only control all 2 xAxis of bottom** 
grid.',
+                    '**inside dataZoom** on top grid area **should be 
removed**.',
+                    '**toolbox zoom** should only control bottom grid.',
+                    'Click btn "addback top grid".',
+                    'dataZoom should **only control all 4 xAxis**.',
+                    '**inside dataZoom** on bottom grid area **should be 
removed**.',
+                    'Click btn "remove all grids".',
+                    'Should no error.',
+                    'Click btn "addback top grid".',
+                    'Functionalities should be OK.'
+                ],
+                option: option,
+                height: 350,
+                buttons: [{
+                    text: 'remove top grid',
                     onclick: function () {
                         chart.setOption({
                             grid: [{
-                                bottom: '60%'
+                                id: 'gb',
                             }],
                             xAxis: [{
+                                id: 'xb0',
                             }, {
+                                id: 'xb1',
                             }],
                             yAxis: [{
+                                id: 'yb'
                             }],
                             series: [{
-                                type: 'line',
-                                data: [[11, 22], [33, 44]]
+                                id: 'sb0',
                             }, {
-                                type: 'line',
-                                xAxisIndex: 1,
-                                data: [[11111, 52], [21133, 74]]
+                                id: 'sb1',
                             }]
-                        });
+                        }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
+                    }
+                }, {
+                    text: 'addback top grid',
+                    onclick: function () {
+                        chart.setOption(makeFirstGridOption());
                     }
                 }, {
                     text: 'remove all grids',
@@ -255,11 +543,40 @@ under the License.
 
 
 
+
+
+
         <script>
         require(['echarts'], function (echarts) {
-            var option;
 
-            option = {
+            function makeFirstGridOption() {
+                return {
+                    grid: [{
+                        bottom: '60%'
+                    }],
+                    xAxis: [{
+                    }, {
+                    }],
+                    yAxis: [{
+                    }],
+                    series: [{
+                        type: 'line',
+                        symbol: 'emptyTriangle',
+                        symbolSize: 20,
+                        data: [[11, 22], [33, 44]]
+                    }, {
+                        type: 'line',
+                        symbol: 'emptyTriangle',
+                        symbolSize: 20,
+                        xAxisIndex: 1,
+                        data: [[11111, 52], [21133, 74]]
+                    }]
+                };
+            }
+
+            var option = makeFirstGridOption();
+
+            var option = {
                 toolbox: {
                     left: 'center',
                     feature: {
@@ -267,121 +584,116 @@ under the License.
                     }
                 },
                 grid: [{
-                    bottom: '60%'
+                    right: '60%'
                 }, {
                     id: 'gb',
-                    top: '60%'
+                    left: '60%'
                 }],
                 xAxis: [{
-                    type: 'category'
                 }, {
-                    type: 'category'
+                    id: 'xb',
+                    gridIndex: 1
+                }],
+                yAxis: [{
                 }, {
-                    id: 'xb0',
+                }, {
+                    id: 'yb0',
                     type: 'category',
                     gridIndex: 1
                 }, {
-                    id: 'xb1',
+                    id: 'yb1',
                     type: 'category',
                     gridIndex: 1
                 }],
-                yAxis: [{
-
+                dataZoom: [{
+                    type: 'slider',
+                    left: 10,
+                    yAxisIndex: [0, 1]
                 }, {
-                    id: 'yb',
-                    gridIndex: 1
+                    type: 'inside',
+                    yAxisIndex: [0, 1]
                 }],
                 series: [{
                     type: 'line',
-                    data: [[333, 22], [666, 44]]
+                    symbol: 'emptyTriangle',
+                    symbolSize: 20,
+                    data: [[22, 11], [44, 33]]
                 }, {
                     type: 'line',
-                    xAxisIndex: 1,
-                    data: [[88888, 52], [99999, 74]]
+                    symbol: 'emptyTriangle',
+                    symbolSize: 20,
+                    yAxisIndex: 1,
+                    data: [[52, 11111], [74, 21133]]
                 }, {
                     id: 'sb0',
                     type: 'line',
-                    xAxisIndex: 2,
-                    yAxisIndex: 1,
-                    data: [[63, 432], [98, 552]]
+                    symbol: 'emptyTriangle',
+                    symbolSize: 20,
+                    xAxisIndex: 1,
+                    yAxisIndex: 2,
+                    data: [[432, 23], [552, 54], [324, 124], [134, 341], [213, 
888]]
                 }, {
                     id: 'sb1',
                     type: 'line',
-                    xAxisIndex: 3,
-                    yAxisIndex: 1,
-                    data: [[87654, 1432], [56789, 1552]]
+                    symbol: 'emptyTriangle',
+                    symbolSize: 20,
+                    xAxisIndex: 1,
+                    yAxisIndex: 3,
+                    data: [[1432, 222233], [1552, 111154], [1231, 222223], 
[3322, 131313], [5512, 717171]]
                 }]
             };
 
-            var chart = testHelper.create(echarts, 
'auto_axis_second_setOption_only_toolbox_dz', {
+            var chart = testHelper.create(echarts, 'remove_dz', {
                 title: [
-                    '[Only toolbox dataZoom] two grids, each has two xAxis.',
-                    'toolbox zoom should work on **all grids**.',
-                    'Click btn "remove the first grid".',
-                    'toolbox zoom should work only on **the second grids**.',
-                    'Click btn "addback the first grid".',
-                    'toolbox zoom should work on **all grids**.',
-                    'Click btn "remove all grids".',
-                    'Should **no error**.',
-                    'Check toolbox zoom should **not work on the original 
area**.',
-                    'Click btn "addback the first grid".',
-                    'toolbox zoom should work only on the **the first 
grids**.',
+                    'Test: remove dataZoom',
+                    'two grids, each has two yAxis.',
+                    'dataZoom should **only control all 2 yAxis of left** 
grid.',
+                    'Click btn "remove left dataZoom".',
+                    'dz disappear and insideZoom should **no longer work**.',
+                    '**toolbox zoom** should still work.',
+                    'Click btn "add right dataZoom".',
+                    'dataZoom should **only control all 2 yAxis of right** 
grid.',
+                    'Click btn "dataZoom control x".',
+                    'dataZoom should lay full of bottom and **only control all 
xAxis**.',
                 ],
                 option: option,
                 height: 350,
                 buttons: [{
-                    text: 'remove the first grid',
+                    text: 'remove left dataZoom',
                     onclick: function () {
                         chart.setOption({
-                            grid: [{
-                                id: 'gb',
-                            }],
-                            xAxis: [{
-                                id: 'xb0',
-                            }, {
-                                id: 'xb1',
-                            }],
-                            yAxis: [{
-                                id: 'yb'
-                            }],
-                            series: [{
-                                id: 'sb0',
-                            }, {
-                                id: 'sb1',
-                            }]
-                        }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
+                        }, { replaceMerge: ['dataZoom'] });
                     }
                 }, {
-                    text: 'addback the first grid',
+                    text: 'add right dataZoom',
                     onclick: function () {
                         chart.setOption({
-                            grid: [{
-                                bottom: '60%'
-                            }],
-                            xAxis: [{
-                            }, {
-                            }],
-                            yAxis: [{
-                            }],
-                            series: [{
-                                type: 'line',
-                                data: [[333, 22], [666, 44]]
+                            dataZoom: [{
+                                type: 'slider',
+                                right: 10,
+                                yAxisIndex: [2, 3]
                             }, {
-                                type: 'line',
-                                xAxisIndex: 1,
-                                data: [[88888, 52], [99999, 74]]
+                                type: 'inside',
+                                yAxisIndex: [2, 3]
                             }]
                         });
                     }
                 }, {
-                    text: 'remove all grids',
+                    text: 'dataZoom control x',
                     onclick: function () {
                         chart.setOption({
-                            grid: [],
-                            xAxis: [],
-                            yAxis: [],
-                            series: []
-                        }, { replaceMerge: ['grid', 'xAxis', 'yAxis', 
'series'] });
+                            dataZoom: [{
+                                bottom: 10,
+                                left: 20,
+                                right: 20,
+                                width: null,
+                                xAxisIndex: 'all',
+                                yAxisIndex: 'none'
+                            }, {
+                                xAxisIndex: 'all',
+                                yAxisIndex: 'none'
+                            }]
+                        });
                     }
                 }]
             });
diff --git a/test/option-replaceMerge.html b/test/option-replaceMerge.html
index 0ed8388..a56d375 100644
--- a/test/option-replaceMerge.html
+++ b/test/option-replaceMerge.html
@@ -717,11 +717,11 @@ under the License.
                 var option = {
                     grid: [{
                         right: '55%',
-                        bottom: 30
+                        bottom: 70
                     }, {
                         id: 'grid-r',
                         left: '55%',
-                        bottom: 30
+                        bottom: 70
                     }],
                     xAxis: [{
                         type: 'category',
@@ -739,11 +739,11 @@ under the License.
                     }],
                     legend: {},
                     tooltip: {},
-                    // dataZoom: [{
-                    //     type: 'slider'
-                    // }, {
-                    //     type: 'inside'
-                    // }],
+                    dataZoom: [{
+                        type: 'slider'
+                    }, {
+                        type: 'inside'
+                    }],
                     toolbox: {
                         left: 'center',
                         top: 25,
@@ -786,8 +786,11 @@ under the License.
 
             var chartSrc = testHelper.create(echarts, 
'main_replaceMerge_reproduce_by_getOption_src', {
                 title: [
-                    '**replaceMerge**: reproduce via getOption',
-                    'click the buttons one by one from left to right',
+                    '**replaceMerge**: test reproduce via **getOption**',
+                    'Click "remove left grid"',
+                    'left grid removed and dataZoom go to right grid',
+                    'use insideZoom',
+                    'Click "reproduce1"',
                     'should show **TWO checked: Pass**',
                     'The chart reproduced below should be **the same**'
                 ],
@@ -815,84 +818,18 @@ under the License.
                     onclick: function () {
                         testHelper.printAssert(chartSrc, function (assert) {
                             var seriesModels = chartSrc.getModel().getSeries();
-                            assert(seriesModels.length === 3);
-                            assert(seriesModels[0].componentIndex === 0);
-                            assert(seriesModels[1].componentIndex === 2);
-                            assert(seriesModels[2].componentIndex === 3);
-                            assert(seriesModels[0].id === 'a');
-                            assert(seriesModels[1].id === 'c');
-                            assert(seriesModels[2].id === 'd');
-
-                            assert(chartSrc.getModel().getSeriesCount() === 3);
-
-                            var optionGotten = chartSrc.getOption();
-                            assert(optionGotten.series.length === 4);
-                            assert(optionGotten.series[0].name === 'aa');
-                            assert(optionGotten.series[1] == null);
-                            assert(optionGotten.series[2].name === 'cc');
-                            assert(optionGotten.series[3].name === 'dd');
-
-                            assert(chartSrc.getModel().getSeriesByIndex(1) == 
null);
-                            assert(chartSrc.getModel().getComponent('series', 
1) == null);
-                        });
-                    }
-                }, {
-                    text: 'replaceMerge',
-                    onclick: function () {
-                        chartSrc.setOption({
-                            series: [{
-                                id: 'm',
-                                type: 'bar',
-                                data: [['a11', 22], ['a33', 44]]
-                            }, {
-                                id: 'n',
-                                type: 'bar',
-                                data: [['a11', 32], ['a33', 54]]
-                            }, {
-                                id: 'a'
-                            }, {
-                                id: 'c'
-                            }, {
-                                id: 'd'
-                            }]
-                        }, {replaceMerge: 'series'});
-                    }
-                }, {
-                    text: 'then check',
-                    onclick: function () {
-                        testHelper.printAssert(chartSrc, function (assert) {
-                            var seriesModels = chartSrc.getModel().getSeries();
-                            assert(seriesModels.length === 5);
-                            assert(seriesModels[0].componentIndex === 0);
-                            assert(seriesModels[1].componentIndex === 1);
-                            assert(seriesModels[2].componentIndex === 2);
-                            assert(seriesModels[3].componentIndex === 3);
-                            assert(seriesModels[4].componentIndex === 4);
-                            assert(seriesModels[0].id === 'a');
-                            assert(seriesModels[1].id === 'm');
-                            assert(seriesModels[2].id === 'c');
-                            assert(seriesModels[3].id === 'd');
-                            assert(seriesModels[4].id === 'n');
-
-                            assert(chartSrc.getModel().getSeriesCount() === 5);
+                            assert(seriesModels.length === 1);
+                            assert(seriesModels[0].componentIndex === 1);
 
                             var optionGotten = chartSrc.getOption();
-                            assert(optionGotten.series.length === 5);
-                            assert(optionGotten.series[0].id === 'a');
-                            assert(optionGotten.series[1].id === 'm');
-                            assert(optionGotten.series[2].id === 'c');
-                            assert(optionGotten.series[3].id === 'd');
-                            assert(optionGotten.series[4].id === 'n');
+                            assert(optionGotten.series.length === 2);
+                            assert(optionGotten.series[0] === null);
+                            assert(optionGotten.series[1].id === 'b');
 
-                            assert(chartSrc.getModel().getSeriesByIndex(1).id 
== 'm');
-                            assert(chartSrc.getModel().getComponent('series', 
1).id == 'm');
+                            console.log(optionGotten);
+                            chartTar.setOption(optionGotten);
                         });
                     }
-                }, {
-                    text: 'reset all',
-                    onclick: function () {
-                        chartSrc.setOption(makeInitOption(), true);
-                    }
                 }],
                 height: 200
             });


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to