githubmirror/echarts

test/option-replaceMerge.html
1 010 строк37 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7
<!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>