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