You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/07/17 11:39:13 UTC
[incubator-echarts] 14/16: fix: fix feature reproduce and complete
test case.
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 <su...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org