1012 lines
37 KiB
HTML
Generated
1012 lines
37 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src="lib/jquery.min.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<!-- <script src="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
|
|
<div id="main_normalMerge_basic"></div>
|
|
<div id="main_replaceMerge_basic"></div>
|
|
<div id="main_normalMerge_add"></div>
|
|
<div id="main_replaceMerge_add_no_id"></div>
|
|
<div id="main_replaceMerge_add_new_id"></div>
|
|
<div id="main_replaceMerge_add_find_hole"></div>
|
|
<div id="main_normalMerge_add_find_hole"></div>
|
|
<div id="main_replaceMerge_internal_and_other_cmpt_not_effect"></div>
|
|
<div id="main_replaceMerge_remove_all"></div>
|
|
<div id="main_replaceMerge_reproduce_by_getOption_src"></div>
|
|
<div id="main_replaceMerge_reproduce_by_getOption_tar"></div>
|
|
<div id="main_replaceMerge_if_not_declared_in_option"></div>
|
|
<div id="main_throw_error_when_id_duplicated"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
function makeBasicOption(opt) {
|
|
return {
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {},
|
|
legend: {},
|
|
tooltip: {},
|
|
dataZoom: [{
|
|
type: 'slider'
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
series: [{
|
|
id: 'a',
|
|
name: 'aa',
|
|
type: 'line',
|
|
data: [['a11', 22], ['a33', 44]]
|
|
}, {
|
|
id: 'b',
|
|
name: 'bb',
|
|
type: 'line',
|
|
data: [['a11', 55], ['a33', 77]]
|
|
}, {
|
|
id: 'c',
|
|
name: 'cc',
|
|
type: 'line',
|
|
data: [['a11', 66], ['a33', 100]]
|
|
}, {
|
|
id: 'd',
|
|
name: 'dd',
|
|
type: 'line',
|
|
data: [['a11', 99], ['a33', 130]]
|
|
}, {
|
|
name: 'no_id',
|
|
type: 'line',
|
|
data: [['a11', 130], ['a33', 160]]
|
|
}]
|
|
};
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- ----------------------------- -->
|
|
<!-- ----------------------------- -->
|
|
<!-- ----------------------------- -->
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_normalMerge_basic', {
|
|
title: [
|
|
'normalMerge: basic case',
|
|
'click "setOption": "bb" become bar chart, "aa" become **rect** symbol',
|
|
'other series **do not change**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'b',
|
|
type: 'bar',
|
|
data: [['a11', 55], ['a33', 77]]
|
|
}, {
|
|
id: 'a',
|
|
symbol: 'rect'
|
|
}]
|
|
})
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_basic', {
|
|
title: [
|
|
'replaceMerge: basic case',
|
|
'click "setOption": "bb" become bar chart, "aa" become **rect** symbol',
|
|
'other series **removed**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'b',
|
|
type: 'bar',
|
|
data: [['a11', 55], ['a33', 77]]
|
|
}, {
|
|
id: 'a',
|
|
symbol: 'rect'
|
|
}]
|
|
}, {replaceMerge: 'series'})
|
|
}
|
|
}, {
|
|
text: 'check after click setOption',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.getModel().getSeries();
|
|
assert(seriesModels.length === 2);
|
|
assert(chart.getModel().getSeriesCount() === 2);
|
|
});
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_normalMerge_add', {
|
|
title: [
|
|
'normalMerge: add',
|
|
'click "setOption": "aa" become **rect** symbol, "no_id" become "new_no_id" and bar',
|
|
'other series **do not change**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'a',
|
|
symbol: 'rect'
|
|
}, {
|
|
name: 'new_no_id',
|
|
type: 'bar',
|
|
data: [['a11', 10], ['a33', 20]]
|
|
}]
|
|
})
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_add_no_id', {
|
|
title: [
|
|
'replaceMerge: add (add no id)',
|
|
'click "setOption": "aa" become **rect** symbol, bar series "new_no_id" added',
|
|
'other series **removed**',
|
|
'click "check": should show **checked: Pass**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'a',
|
|
symbol: 'rect'
|
|
}, {
|
|
name: 'new_no_id',
|
|
type: 'bar',
|
|
data: [['a11', 10], ['a33', 20]]
|
|
}]
|
|
}, {replaceMerge: ['series']});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.getModel().getSeries();
|
|
assert(seriesModels.length === 2);
|
|
assert(
|
|
seriesModels[1].componentIndex === 1
|
|
&& seriesModels[1].name === 'new_no_id'
|
|
);
|
|
assert(chart.getModel().getSeriesCount() === 2);
|
|
});
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_add_new_id', {
|
|
title: [
|
|
'replaceMerge: add (has new id)',
|
|
'click "setOption": "aa" become **rect** symbol, bar series "xx" added',
|
|
'other series **removed**',
|
|
'click "check": should show **checked: Pass**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'a',
|
|
symbol: 'rect'
|
|
}, {
|
|
id: 'x',
|
|
name: 'xx',
|
|
type: 'bar',
|
|
data: [['a11', 10], ['a33', 20]]
|
|
}]
|
|
}, {replaceMerge: 'series'});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.getModel().getSeries();
|
|
assert(seriesModels.length === 2);
|
|
assert(
|
|
seriesModels[1].componentIndex === 1
|
|
&& seriesModels[1].name === 'xx'
|
|
);
|
|
assert(chart.getModel().getSeriesCount() === 2);
|
|
});
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
function makeInitOption() {
|
|
var option = makeBasicOption();
|
|
|
|
option.toolbox = {
|
|
left: 'center',
|
|
top: 25,
|
|
feature: {
|
|
magicType: {
|
|
show: true,
|
|
type: ['line', 'bar']
|
|
},
|
|
dataZoom: {},
|
|
restore: {},
|
|
dataView: {}
|
|
}
|
|
};
|
|
|
|
return option;
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_add_find_hole', {
|
|
title: [
|
|
'**replaceMerge**: add (find the first hole)',
|
|
'<1> click the buttons one by one from left to right',
|
|
'should show **TWO checked: Pass**',
|
|
'<2> use **toolbox.dataZoom**, then click btns again, should be OK',
|
|
'<3> use **toolbox.magicType**, then click btns again, should be OK',
|
|
'<4> use **toolbox.dataView**, then click btns again, should be OK',
|
|
'<5> use **toolbox.restore**, then click btns again, should be OK',
|
|
],
|
|
option: makeInitOption(),
|
|
buttons: [{
|
|
text: 'remove some',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'a'
|
|
}, {
|
|
id: 'c'
|
|
}, {
|
|
id: 'd'
|
|
}]
|
|
}, {replaceMerge: 'series'});
|
|
}
|
|
}, {
|
|
text: 'then check',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.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(chart.getModel().getSeriesCount() === 3);
|
|
|
|
var optionGotten = chart.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(chart.getModel().getSeriesByIndex(1) == null);
|
|
assert(chart.getModel().getComponent('series', 1) == null);
|
|
|
|
var eachModelResult = [];
|
|
var eachIndexResult = [];
|
|
chart.getModel().eachComponent('series', function (seriesModel, seriesIndex) {
|
|
eachModelResult.push(seriesModel);
|
|
eachIndexResult.push(seriesIndex);
|
|
});
|
|
assert(eachModelResult.length === 3 && eachIndexResult.length === 3);
|
|
for (var i = 0; i < 3; i++) {
|
|
assert(eachModelResult[i] === seriesModels[i]);
|
|
assert(eachIndexResult[i] === seriesModels[i].componentIndex);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
text: 'replaceMerge',
|
|
onclick: function () {
|
|
chart.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(chart, function (assert) {
|
|
var seriesModels = chart.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(chart.getModel().getSeriesCount() === 5);
|
|
|
|
var optionGotten = chart.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(chart.getModel().getSeriesByIndex(1).id == 'm');
|
|
assert(chart.getModel().getComponent('series', 1).id == 'm');
|
|
|
|
var eachModelResult = [];
|
|
var eachIndexResult = [];
|
|
chart.getModel().eachComponent('series', function (seriesModel, seriesIndex) {
|
|
eachModelResult.push(seriesModel);
|
|
eachIndexResult.push(seriesIndex);
|
|
});
|
|
assert(eachModelResult.length === 5 && eachIndexResult.length === 5);
|
|
for (var i = 0; i < 5; i++) {
|
|
assert(eachModelResult[i] === seriesModels[i]);
|
|
assert(eachIndexResult[i] === seriesModels[i].componentIndex);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
text: 'reset all',
|
|
onclick: function () {
|
|
chart.setOption(makeInitOption(), true);
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_normalMerge_add_find_hole', {
|
|
title: [
|
|
'**normalMerge**: add (find the first hole)',
|
|
'click the buttons one by one from left to right',
|
|
'should show **TWO checked: Pass**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption_remove',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'a'
|
|
}, {
|
|
id: 'c'
|
|
}, {
|
|
id: 'd'
|
|
}]
|
|
}, {replaceMerge: 'series'});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption_remove',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.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(chart.getModel().getSeriesCount() === 3);
|
|
|
|
var optionGotten = chart.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(chart.getModel().getSeriesByIndex(1) == null);
|
|
assert(chart.getModel().getComponent('series', 1) == null);
|
|
});
|
|
}
|
|
}, {
|
|
text: 'setOption_normalMerge',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: [{
|
|
id: 'm',
|
|
type: 'bar',
|
|
data: [['a11', 22], ['a33', 44]]
|
|
}, {
|
|
id: 'n',
|
|
type: 'bar',
|
|
data: [['a11', 32], ['a33', 54]]
|
|
}]
|
|
});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption_normalMerge',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.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(chart.getModel().getSeriesCount() === 5);
|
|
|
|
var optionGotten = chart.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(chart.getModel().getSeriesByIndex(1).id == 'm');
|
|
assert(chart.getModel().getComponent('series', 1).id == 'm');
|
|
});
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = {
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {},
|
|
legend: {},
|
|
tooltip: {},
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {}
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
id: 'inside_dz',
|
|
type: 'inside'
|
|
}],
|
|
series: [{
|
|
id: 'a',
|
|
name: 'aa',
|
|
type: 'line',
|
|
data: [['a11', 22], ['a33', 44]]
|
|
}, {
|
|
id: 'b',
|
|
name: 'bb',
|
|
type: 'line',
|
|
data: [['a11', 55], ['a33', 77]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_internal_and_other_cmpt_not_effect', {
|
|
title: [
|
|
'replaceMerge: inner not effect',
|
|
'click "setOption": a dataZoom.slider added',
|
|
'check **inside dataZoom** and **select dataZoom** on toolbox still OK',
|
|
'series **not change**',
|
|
'click "check": should show **checked: Pass**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
dataZoom: [{
|
|
type: 'slider'
|
|
}, {
|
|
id: 'inside_dz'
|
|
}]
|
|
}, {replaceMerge: ['dataZoom']});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var insideDZ = chart.getModel().getComponent('dataZoom', 0);
|
|
var selectDZX = chart.getModel().getComponent('dataZoom', 1);
|
|
var selectDZY = chart.getModel().getComponent('dataZoom', 2);
|
|
var sliderDZ = chart.getModel().getComponent('dataZoom', 3);
|
|
assert(insideDZ.type === 'dataZoom.inside');
|
|
assert(selectDZX.type === 'dataZoom.select');
|
|
assert(selectDZY.type === 'dataZoom.select');
|
|
assert(sliderDZ.type === 'dataZoom.slider');
|
|
assert(chart.getModel().getComponent('dataZoom', 4) == null);
|
|
});
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option = makeBasicOption();
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_remove_all', {
|
|
title: [
|
|
'replaceMerge: remove all',
|
|
'click "setOption": "all series should be removed"',
|
|
'click "check": should show **checked: Pass**'
|
|
],
|
|
option: option,
|
|
buttons: [{
|
|
text: 'setOption',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
series: []
|
|
}, {replaceMerge: 'series'});
|
|
}
|
|
}, {
|
|
text: 'check after click setOption',
|
|
onclick: function () {
|
|
testHelper.printAssert(chart, function (assert) {
|
|
var seriesModels = chart.getModel().getSeries();
|
|
assert(seriesModels.length === 0);
|
|
assert(chart.getModel().getSeriesCount() === 0);
|
|
});
|
|
}
|
|
}],
|
|
height: 300
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
function makeInitOption() {
|
|
var option = {
|
|
grid: [{
|
|
right: '55%',
|
|
bottom: 70
|
|
}, {
|
|
id: 'grid-r',
|
|
left: '55%',
|
|
bottom: 70
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
gridIndex: 0,
|
|
}, {
|
|
id: 'xAxis-r',
|
|
type: 'category',
|
|
gridIndex: 1,
|
|
}],
|
|
yAxis: [{
|
|
gridIndex: 0
|
|
}, {
|
|
id: 'yAxis-r',
|
|
gridIndex: 1
|
|
}],
|
|
legend: {},
|
|
tooltip: {},
|
|
dataZoom: [{
|
|
type: 'slider'
|
|
}, {
|
|
type: 'inside'
|
|
}],
|
|
toolbox: {
|
|
left: 'center',
|
|
top: 25,
|
|
feature: {
|
|
magicType: {
|
|
show: true,
|
|
type: ['line', 'bar']
|
|
},
|
|
dataZoom: {},
|
|
restore: {},
|
|
dataView: {}
|
|
}
|
|
},
|
|
series: [{
|
|
id: 'a',
|
|
name: 'aa',
|
|
type: 'line',
|
|
data: [['a11', 22], ['a33', 44]]
|
|
}, {
|
|
id: 'b',
|
|
name: 'bb',
|
|
type: 'line',
|
|
data: [['a11', 55], ['a33', 77]],
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
}, {
|
|
id: 'c',
|
|
name: 'cc',
|
|
type: 'line',
|
|
data: [['a11', 66], ['a33', 100]]
|
|
}, {
|
|
name: 'no_id',
|
|
type: 'line',
|
|
data: [['a11', 130], ['a33', 160]]
|
|
}]
|
|
};
|
|
|
|
return option;
|
|
}
|
|
|
|
var chartSrc = testHelper.create(echarts, 'main_replaceMerge_reproduce_by_getOption_src', {
|
|
title: [
|
|
'**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**'
|
|
],
|
|
option: makeInitOption(),
|
|
buttons: [{
|
|
text: 'remove left grid',
|
|
onclick: function () {
|
|
chartSrc.setOption({
|
|
grid: {
|
|
id: 'grid-r'
|
|
},
|
|
xAxis: {
|
|
id: 'xAxis-r'
|
|
},
|
|
yAxis: {
|
|
id: 'yAxis-r'
|
|
},
|
|
series: [{
|
|
id: 'b'
|
|
}]
|
|
}, { replaceMerge: ['series', 'grid', 'xAxis', 'yAxis'] });
|
|
}
|
|
}, {
|
|
text: 'reproduce',
|
|
onclick: function () {
|
|
testHelper.printAssert(chartSrc, function (assert) {
|
|
var seriesModels = chartSrc.getModel().getSeries();
|
|
assert(seriesModels.length === 1);
|
|
assert(seriesModels[0].componentIndex === 1);
|
|
|
|
var optionGotten = chartSrc.getOption();
|
|
assert(optionGotten.series.length === 2);
|
|
assert(optionGotten.series[0] === null);
|
|
assert(optionGotten.series[1].id === 'b');
|
|
|
|
console.log(optionGotten);
|
|
chartTar.setOption(optionGotten);
|
|
});
|
|
}
|
|
}],
|
|
height: 200
|
|
});
|
|
|
|
var chartTar = testHelper.create(echarts, 'main_replaceMerge_reproduce_by_getOption_tar', {
|
|
title: [
|
|
'↓↓↓ reproduce ↓↓↓ ',
|
|
],
|
|
option: {},
|
|
height: 200
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
function makePartialOption() {
|
|
return {
|
|
grid: [{
|
|
bottom: '60%'
|
|
}, {
|
|
id: 'gb',
|
|
top: '60%'
|
|
}],
|
|
xAxis: [{
|
|
type: 'category'
|
|
}, {
|
|
type: 'category'
|
|
}, {
|
|
id: 'xb0',
|
|
type: 'category',
|
|
gridIndex: 1
|
|
}, {
|
|
id: 'xb1',
|
|
type: 'category',
|
|
gridIndex: 1
|
|
}],
|
|
yAxis: [{
|
|
|
|
}, {
|
|
id: 'yb',
|
|
gridIndex: 1
|
|
}],
|
|
series: [{
|
|
type: 'line',
|
|
data: [[11, 22], [33, 44]]
|
|
}, {
|
|
type: 'line',
|
|
xAxisIndex: 1,
|
|
data: [[11111, 52], [21133, 74]]
|
|
}, {
|
|
id: 'sb0',
|
|
type: 'line',
|
|
xAxisIndex: 2,
|
|
yAxisIndex: 1,
|
|
data: [[23, 432], [54, 552]]
|
|
}, {
|
|
id: 'sb1',
|
|
type: 'line',
|
|
xAxisIndex: 3,
|
|
yAxisIndex: 1,
|
|
data: [[222233, 1432], [111154, 1552]]
|
|
}]
|
|
};
|
|
}
|
|
|
|
var option = echarts.util.extend(makePartialOption(), {
|
|
toolbox: {
|
|
left: 'center',
|
|
feature: {
|
|
dataZoom: {}
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
xAxisIndex: 'all'
|
|
}, {
|
|
type: 'inside',
|
|
xAxisIndex: 'all'
|
|
}]
|
|
});
|
|
|
|
var chart = testHelper.create(echarts, 'main_replaceMerge_if_not_declared_in_option', {
|
|
title: [
|
|
'DataZoom controlls all of the axes.',
|
|
'Click btn "remove all grids".',
|
|
'Should no error.',
|
|
'Click btn "addback".',
|
|
'Functionalities should be OK.'
|
|
],
|
|
option: option,
|
|
height: 350,
|
|
buttons: [{
|
|
text: 'remove all grids',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
// Not declared in option
|
|
}, { replaceMerge: ['grid', 'xAxis', 'yAxis', 'series'] });
|
|
}
|
|
}, {
|
|
text: 'addback',
|
|
onclick: function () {
|
|
chart.setOption(makePartialOption());
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
xAxis: [{
|
|
type: 'category'
|
|
}],
|
|
yAxis: [{
|
|
}],
|
|
series: [{
|
|
id: 'sb0',
|
|
type: 'line',
|
|
data: [[11, 22], [33, 44]]
|
|
}, {
|
|
type: 'line',
|
|
data: [[11111, 52], [21133, 74]]
|
|
}, {
|
|
id: 'sb0',
|
|
type: 'line',
|
|
data: [[222233, 1432], [111154, 1552]]
|
|
}]
|
|
};
|
|
|
|
testHelper.printAssert('main_throw_error_when_id_duplicated', function (assert) {
|
|
try {
|
|
var chart = testHelper.create(echarts, 'main_throw_error_when_id_duplicated', {
|
|
title: [
|
|
'Check throw error when id duplicated',
|
|
'Should show **checked: Pass**'
|
|
],
|
|
option: option,
|
|
height: 100,
|
|
});
|
|
assert(false);
|
|
}
|
|
catch (err) {
|
|
assert(true);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|