| <!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> | |