| <!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/esl.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> |
| |
