test/option-replaceMerge2.html

<!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="transition_facet_cartesian"></div>
        <div id="notMerge_transition_replaceMerge_newView"></div>
        <div id="main_replaceMerge_keep_update"></div>
        <div id="transition_dots"></div>


        <script>
        require(['echarts'], function (echarts) {
            var optionBase = {
                color: ['#eb6134', '#eb9934', '#348feb', '#36b6d9'],
                dataset: {
                    source: [
                        [null, 'sweet zongzi', 'salty zongzi', 'sweet milk tea', 'salty milk tea'],
                        ['2012-01', 32, 65, 71, 31],
                        ['2012-02', 41, 67, 89, 23],
                        ['2012-03', 58, 61, 97, 12],
                        ['2012-04', 67, 73, 105, 9],
                        ['2012-05', 72, 67, 122, 18],
                        ['2012-06', 94, 79, 118, 32],
                        ['2012-07', 79, 89, 131, 37],
                        ['2012-08', 65, 76, 103, 41],
                        ['2012-09', 69, 81, 84, 48],
                        ['2012-10', 74, 64, 104, 38],
                        ['2012-11', 91, 76, 111, 51],
                        ['2012-12', 64, 68, 121, 61]
                    ]
                },
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                dataZoom: [{
                    type: 'slider',
                    height: 15
                }, {
                    type: 'inside'
                }],
                series: [{
                    type: 'bar',
                    encode: { x: 0, y: 1, seriesName: 1 }
                }, {
                    type: 'bar',
                    encode: { x: 0, y: 3, seriesName: 3 }
                }, {
                    type: 'bar',
                    encode: { x: 0, y: 2, seriesName: 2 }
                }, {
                    type: 'bar',
                    encode: { x: 0, y: 4, seriesName: 4 }
                }]
            };

            var optionSingle = makeSingleCartesianOption();
            var option0 = mergeOption(echarts, optionBase, optionSingle);

            function mergeOption(echarts, target, source) {
                echarts.util.each(source, function (srcCmpts, mainType) {
                    var tarCmpts = target[mainType] = toArray(target[mainType]);
                    echarts.util.each(toArray(srcCmpts), function (srcCmpt, index) {
                        tarCmpts[index] = echarts.util.merge(tarCmpts[index], srcCmpt, true);
                    });
                });
                function toArray(some) {
                    return echarts.util.isArray(some) ? some : some ? [some] : [];
                }
                return target;
            }

            function makeSingleCartesianOption() {
                return {
                    grid: {
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        max: 150,
                        axisLine: { show: false },
                        axisTick: { show: false }
                    },
                    axisPointer: {
                        link: [{xAxisIndex: 0}]
                    },
                    dataZoom: [{
                        xAxisIndex: 0
                    }, {
                        xAxisIndex: 0
                    }],
                    series: [{
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }, {
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }, {
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }, {
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }]
                };
            }
            function makeDoubleCartesianOption() {
                return {
                    grid: [{
                        bottom: '52%'
                    }, {
                        top: '52%'
                    }],
                    dataZoom: [{
                        xAxisIndex: [0, 1]
                    }, {
                        xAxisIndex: [0, 1]
                    }],
                    axisPointer: {
                        link: [{xAxisIndex: [0, 1]}]
                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        gridIndex: 0
                    }, {
                        type: 'category',
                        // axisTick: { show: false },
                        axisLine: { onZero: false },
                        gridIndex: 1
                    }],
                    yAxis: [{
                        name: 'sweet',
                        max: 150,
                        nameLocation: 'center',
                        nameGap: 40,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { color: '#000' },
                        gridIndex: 0
                    }, {
                        name: 'salty',
                        max: 150,
                        nameLocation: 'center',
                        nameGap: 40,
                        inverse: true,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { color: '#000' },
                        gridIndex: 1
                    }],
                    series: [{
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }, {
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    }, {
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }, {
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }]
                };
            }

            var chart = testHelper.create(echarts, 'transition_facet_cartesian', {
                title: [
                    '<1> Click "double cartesian", should become **double** grid',
                    'Click "single cartesian", should become **single** grid',
                    'Check transition animation existing',
                    '<2> **downplay some legend item**, then click "doulbe"/"single" btns again',
                    'transition should be OK, legend state should be kept',
                    '<3> **shrink dataZoom**, then click "doulbe"/"single" btns again',
                    'transition should be OK, legend state should be kept',
                ],
                option: option0,
                buttons: [{
                    text: 'double cartesian',
                    onclick: function () {
                        chart.setOption(makeDoubleCartesianOption(), {
                            replaceMerge: ['xAxis', 'yAxis', 'grid']
                        })
                    }
                }, {
                    text: 'single cartesian',
                    onclick: function () {
                        chart.setOption(makeSingleCartesianOption(), {
                            replaceMerge: ['xAxis', 'yAxis', 'grid']
                        })
                    }
                }]
            });
        });
        </script>


        <script>
        require(['echarts'], function (echarts) {
            function makeOption(extOption) {
                return {
                    animationDurationUpdate: 2000,
                    dataset: {
                        source: [
                            [null, 'sweet zongzi', 'salty zongzi', 'sweet milk tea', 'salty milk tea', 'NewNew'],
                            ['2012-01', 32, 65, 71, 31, 99],
                            ['2012-02', 41, 67, 99, 23, 199],
                            ['2012-03', 58, 61, 97, 12, 99],
                            ['2012-04', 67, 73, 105, 9, 199],
                            ['2012-05', 72, 67, 122, 18, 99],
                            ['2012-06', 94, 79, 118, 32, 199],
                        ]
                    },
                    legend: {},
                    tooltip: {
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {},
                    series: extOption.series
                };
            }

            var option_base = makeOption({
                series: [{
                    type: 'scatter',
                    encode: { x: 0, y: 1, seriesName: 1 }
                }, {
                    type: 'scatter',
                    encode: { x: 0, y: 3, seriesName: 3 }
                }]
            });

            var option_notMerge = makeOption({
                series: [{
                    type: 'scatter',
                    encode: { x: 0, y: 2, seriesName: 2 }
                }, {
                    type: 'scatter',
                    encode: { x: 0, y: 4, seriesName: 4 }
                }]
            });

            var option_replaceMerge = {
                series: [{
                    type: 'scatter',
                    encode: { x: 0, y: 5, seriesName: 5 }
                }]
            };

            var seriesModels_base;
            var seriesModels_notMerge;
            var seriesModels_replaceMerge;
            var view0_notMerge;
            var view0_replaceMerge;

            var chart = testHelper.create(echarts, 'notMerge_transition_replaceMerge_newView', {
                title: [
                    'Click btns from left to right:',
                    'Click "setOption_notMerge", should **has trans animation**',
                    'Click "check", should print **checked: Pass**',
                    'Click "setOption_replaceMerge", should only "NewNew" and **no trans animation**',
                    'Click "check", should print **checked: Pass**',
                ],
                option: option_base,
                buttons: [{
                    text: 'setOption_notMerge',
                    onclick: function () {
                        seriesModels_base = chart.getModel().getSeries('series');
                        chart.setOption(option_notMerge, true);
                    }
                }, {
                    text: 'then check',
                    onclick: function () {
                        testHelper.printAssert(chart, function (assert) {
                            seriesModels_notMerge = chart.getModel().getSeries();
                            assert(seriesModels_base.length === 2);
                            assert(seriesModels_notMerge.length === 2);

                            assert(seriesModels_base[0] !== seriesModels_notMerge[0]);
                            assert(seriesModels_base[1] !== seriesModels_notMerge[1]);
                            assert(seriesModels_base[0] !== seriesModels_notMerge[1]);
                            assert(seriesModels_base[1] !== seriesModels_notMerge[0]);
                        });
                    }
                }, {
                    text: 'setOption_replaceMerge',
                    onclick: function () {
                        seriesModels_base = chart.getModel().getSeries('series');
                        view0_notMerge = chart.getViewOfSeriesModel(seriesModels_notMerge[0]);
                        chart.setOption(option_replaceMerge, { replaceMerge: 'series' });
                    }
                }, {
                    text: 'then check',
                    onclick: function () {
                        testHelper.printAssert(chart, function (assert) {
                            seriesModels_replaceMerge = chart.getModel().getSeries();
                            assert(seriesModels_replaceMerge.length === 1);
                            assert(seriesModels_notMerge[0] !== seriesModels_replaceMerge[0]);
                            view0_replaceMerge = chart.getViewOfSeriesModel(seriesModels_replaceMerge[0]);
                            assert(view0_notMerge != null);
                            assert(view0_notMerge !== view0_replaceMerge);
                        });
                    }
                }]
            });
        });
        </script>


        <script>
        require(['echarts'], function (echarts) {
            var currentRound = 0;
            var nameMap = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n'];
            var categories = ['Mon', 'Tue', 'Wed'];

            function createUpdatableSeriesAndDataset(seriesCount) {
                var series = [];
                for (var i = 0; i < seriesCount; i++) {
                    series.push({
                        name: nameMap[i] + '_round_' + currentRound,
                        type: 'bar',
                        barWidth: 40,
                        encode: {
                            x: 0,
                            y: i + 1
                        },
                        seriesLayoutBy: 'row'
                    });
                }
                var dataset = {
                    source: [categories.slice()]
                };
                var yVal = 22 + 100 * currentRound;
                for (var i = 0; i < seriesCount; i++, yVal += 10) {
                    dataset.source.push([yVal, yVal * 2, yVal * 2.5]);
                }

                currentRound++;

                return {
                    series: series,
                    dataset: dataset
                };
            }

            var sInfo = createUpdatableSeriesAndDataset(2);
            var series = sInfo.series;
            var dataset = sInfo.dataset;

            series.unshift({
                id: 'I_never_change',
                name: 'I_never_change',
                type: 'pie',
                selectedMode: 'single',
                lineStyle: {
                    color: '#881100',
                    width: 5
                },
                center: ['20%', 120],
                radius: 40,
                data: [
                    {name: 'Mon', value: 100},
                    {name: 'Tue', value: 200},
                    {name: 'Wed', value: 150},
                    {name: 'Thu', value: 350},
                    {name: 'Fri', value: 180}
                ]
            });

            var option = {
                dataset: dataset,
                brush: {
                    toolbox: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear'],
                    xAxisIndex: 'all',
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {},
                legend: {
                    left: 20
                },
                tooltip: {},
                dataZoom: [{
                    type: 'slider'
                }, {
                    type: 'inside'
                }],
                series: series
            };

            var chart = testHelper.create(echarts, 'main_replaceMerge_keep_update', {
                title: [
                    'replaceMerge: keep update',
                    '<1> click "replace to new 4 series": bar totally replaced to new 4 different bars',
                    'click "replace to new 2 series": bar totally replaced to new 2 different bars',
                    'series "I_never_change" **never change color and data**',
                    'click "check": should show **checked: Pass**',
                    '<2> click pie legend to hide a sector',
                    'click pie to select a sector',
                    'click buttons again, **pie state should not changed**',
                    '<3> use brush',
                    'click buttons again, **brush selected should be correct**',
                ],
                option: option,
                height: 400,
                buttons: [{
                    text: 'replace to new 4 series',
                    onclick: function () {
                        var sInfo = createUpdatableSeriesAndDataset(4);
                        sInfo.series.push({id: 'I_never_change'});
                        chart.setOption({
                            dataset: sInfo.dataset,
                            series: sInfo.series
                        }, {replaceMerge: ['series', 'dataset']});
                    }
                }, {
                    text: 'replace to new 2 series',
                    onclick: function () {
                        var sInfo = createUpdatableSeriesAndDataset(2);
                        sInfo.series.push({id: 'I_never_change'});
                        chart.setOption({
                            dataset: sInfo.dataset,
                            series: sInfo.series
                        }, {replaceMerge: ['series', 'dataset']});
                    }
                }, {
                    text: 'check after click setOption',
                    onclick: function () {
                        testHelper.printAssert(chart, function (assert) {
                            var seriesModels = chart.getModel().getSeries();
                            assert(seriesModels.length <= 6);
                            assert(chart.getModel().getSeriesCount() <= 6);
                        });
                    }
                }]
            });
        });
        </script>


        <script>
        require(['echarts'], function (echarts) {
            var rawData = [[161.2,51.6,0],[174,65.6,1],[167.5,59,0],[175.3,71.8,1],[159.5,49.2,0],[193.5,80.7,1],[157,63,0],[186.5,72.6,1],[155.8,53.6,0],[187.2,78.8,1],[170,59,0],[181.5,74.8,1],[159.1,47.6,0],[184,86.4,1],[166,69.8,0],[184.5,78.4,1],[176.2,66.8,0],[175,62,1],[160.2,75.2,0],[184,81.6,1],[172.5,55.2,0],[180,76.6,1],[170.9,54.2,0],[177.8,83.6,1],[172.9,62.5,0],[192,90,1],[153.4,42,0],[176,74.6,1],[160,50,0],[174,71,1],[147.2,49.8,0],[184,79.6,1],[168.2,49.2,0],[192.7,93.8,1],[175,73.2,0],[171.5,70,1],[157,47.8,0],[173,72.4,1],[167.6,68.8,0],[176,85.9,1],[159.5,50.6,0],[176,78.8,1],[175,82.5,0],[180.5,77.8,1],[166.8,57.2,0],[172.7,66.2,1],[176.5,87.8,0],[176,86.4,1],[170.2,72.8,0],[173.5,81.8,1],[174,54.5,0],[178,89.6,1],[173,59.8,0],[180.3,82.8,1],[179.9,67.3,0],[180.3,76.4,1],[170.5,67.8,0],[164.5,63.2,1],[160,47,0],[173,60.9,1],[154.4,46.2,0],[183.5,74.8,1],[162,55,0],[175.5,70,1],[176.5,83,0],[188,72.4,1],[160,54.4,0],[189.2,84.1,1],[152,45.8,0],[172.8,69.1,1],[162.1,53.6,0],[170,59.5,1],[170,73.2,0],[182,67.2,1],[160.2,52.1,0],[170,61.3,1],[161.3,67.9,0],[177.8,68.6,1],[166.4,56.6,0],[184.2,80.1,1],[168.9,62.3,0],[186.7,87.8,1],[163.8,58.5,0],[171.4,84.7,1],[167.6,54.5,0],[172.7,73.4,1],[160,50.2,0],[175.3,72.1,1],[161.3,60.3,0],[180.3,82.6,1],[167.6,58.3,0],[182.9,88.7,1],[165.1,56.2,0],[188,84.1,1],[160,50.2,0],[177.2,94.1,1],[170,72.9,0],[172.1,74.9,1],[157.5,59.8,0],[167,59.1,1],[167.6,61,0],[169.5,75.6,1],[160.7,69.1,0],[174,86.2,1],[163.2,55.9,0],[172.7,75.3,1],[152.4,46.5,0],[182.2,87.1,1],[157.5,54.3,0],[164.1,55.2,1],[168.3,54.8,0],[163,57,1],[180.3,60.7,0],[171.5,61.4,1],[165.5,60,0],[184.2,76.8,1],[165,62,0],[174,86.8,1],[164.5,60.3,0],[174,72.2,1],[156,52.7,0],[177,71.6,1],[160,74.3,0],[186,84.8,1],[163,62,0],[167,68.2,1],[165.7,73.1,0],[171.8,66.1,1],[161,80,0],[182,72,1],[162,54.7,0],[167,64.6,1],[166,53.2,0],[177.8,74.8,1],[174,75.7,0],[164.5,70,1],[172.7,61.1,0],[192,101.6,1],[167.6,55.7,0],[175.5,63.2,1],[151.1,48.7,0],[171.2,79.1,1],[164.5,52.3,0],[181.6,78.9,1],[163.5,50,0],[167.4,67.7,1],[152,59.3,0],[181.1,66,1],[169,62.5,0],[177,68.2,1],[164,55.7,0],[174.5,63.9,1],[161.2,54.8,0],[177.5,72,1],[155,45.9,0],[170.5,56.8,1],[170,70.6,0],[182.4,74.5,1],[176.2,67.2,0],[197.1,90.9,1],[170,69.4,0],[180.1,93,1],[162.5,58.2,0],[175.5,80.9,1],[170.3,64.8,0],[180.6,72.7,1],[164.1,71.6,0],[184.4,68,1],[169.5,52.8,0],[175.5,70.9,1],[163.2,59.8,0],[180.6,72.5,1],[154.5,49,0],[177,72.5,1],[159.8,50,0],[177.1,83.4,1],[173.2,69.2,0],[181.6,75.5,1],[170,55.9,0],[176.5,73,1],[161.4,63.4,0],[175,70.2,1],[169,58.2,0],[174,73.4,1],[166.2,58.6,0],[165.1,70.5,1],[159.4,45.7,0],[177,68.9,1],[162.5,52.2,0],[192,102.3,1],[159,48.6,0],[176.5,68.4,1],[162.8,57.8,0],[169.4,65.9,1],[159,55.6,0],[182.1,75.7,1],[179.8,66.8,0],[179.8,84.5,1],[162.9,59.4,0],[175.3,87.7,1],[161,53.6,0],[184.9,86.4,1],[151.1,73.2,0],[177.3,73.2,1],[168.2,53.4,0],[167.4,53.9,1],[168.9,69,0],[178.1,72,1],[173.2,58.4,0],[168.9,55.5,1],[171.8,56.2,0],[157.2,58.4,1],[178,70.6,0],[180.3,83.2,1],[164.3,59.8,0],[170.2,72.7,1],[163,72,0],[177.8,64.1,1],[168.5,65.2,0],[172.7,72.3,1],[166.8,56.6,0],[165.1,65,1],[172.7,105.2,0],[186.7,86.4,1],[163.5,51.8,0],[165.1,65,1],[169.4,63.4,0],[174,88.6,1],[167.8,59,0],[175.3,84.1,1],[159.5,47.6,0],[185.4,66.8,1],[167.6,63,0],[177.8,75.5,1],[161.2,55.2,0],[180.3,93.2,1],[160,45,0],[180.3,82.7,1],[163.2,54,0],[177.8,58,1],[162.2,50.2,0],[177.8,79.5,1],[161.3,60.2,0],[177.8,78.6,1],[149.5,44.8,0],[177.8,71.8,1],[157.5,58.8,0],[177.8,116.4,1],[163.2,56.4,0],[163.8,72.2,1],[172.7,62,0],[188,83.6,1],[155,49.2,0],[198.1,85.5,1],[156.5,67.2,0],[175.3,90.9,1],[164,53.8,0],[166.4,85.9,1],[160.9,54.4,0],[190.5,89.1,1],[162.8,58,0],[166.4,75,1],[167,59.8,0],[177.8,77.7,1],[160,54.8,0],[179.7,86.4,1],[160,43.2,0],[172.7,90.9,1],[168.9,60.5,0],[190.5,73.6,1],[158.2,46.4,0],[185.4,76.4,1],[156,64.4,0],[168.9,69.1,1],[160,48.8,0],[167.6,84.5,1],[167.1,62.2,0],[175.3,64.5,1],[158,55.5,0],[170.2,69.1,1],[167.6,57.8,0],[190.5,108.6,1],[156,54.6,0],[177.8,86.4,1],[162.1,59.2,0],[190.5,80.9,1],[173.4,52.7,0],[177.8,87.7,1],[159.8,53.2,0],[184.2,94.5,1],[170.5,64.5,0],[176.5,80.2,1],[159.2,51.8,0],[177.8,72,1],[157.5,56,0],[180.3,71.4,1],[161.3,63.6,0],[171.4,72.7,1],[162.6,63.2,0],[172.7,84.1,1],[160,59.5,0],[172.7,76.8,1],[168.9,56.8,0],[177.8,63.6,1],[165.1,64.1,0],[177.8,80.9,1],[162.6,50,0],[182.9,80.9,1],[165.1,72.3,0],[170.2,85.5,1],[166.4,55,0],[167.6,68.6,1],[160,55.9,0],[175.3,67.7,1],[152.4,60.4,0],[165.1,66.4,1],[170.2,69.1,0],[185.4,102.3,1],[162.6,84.5,0],[181.6,70.5,1],[170.2,55.9,0],[172.7,95.9,1],[158.8,55.5,0],[190.5,84.1,1],[172.7,69.5,0],[179.1,87.3,1],[167.6,76.4,0],[175.3,71.8,1],[162.6,61.4,0],[170.2,65.9,1],[167.6,65.9,0],[193,95.9,1],[156.2,58.6,0],[171.4,91.4,1],[175.2,66.8,0],[177.8,81.8,1],[172.1,56.6,0],[177.8,96.8,1],[162.6,58.6,0],[167.6,69.1,1],[160,55.9,0],[167.6,82.7,1],[165.1,59.1,0],[180.3,75.5,1],[182.9,81.8,0],[182.9,79.5,1],[166.4,70.7,0],[176.5,73.6,1],[165.1,56.8,0],[186.7,91.8,1],[177.8,60,0],[188,84.1,1],[165.1,58.2,0],[188,85.9,1],[175.3,72.7,0],[177.8,81.8,1],[154.9,54.1,0],[174,82.5,1],[158.8,49.1,0],[177.8,80.5,1],[172.7,75.9,0],[171.4,70,1],[168.9,55,0],[185.4,81.8,1],[161.3,57.3,0],[185.4,84.1,1],[167.6,55,0],[188,90.5,1],[165.1,65.5,0],[188,91.4,1],[175.3,65.5,0],[182.9,89.1,1],[157.5,48.6,0],[176.5,85,1],[163.8,58.6,0],[175.3,69.1,1],[167.6,63.6,0],[175.3,73.6,1],[165.1,55.2,0],[188,80.5,1],[165.1,62.7,0],[188,82.7,1],[168.9,56.6,0],[175.3,86.4,1],[162.6,53.9,0],[170.5,67.7,1],[164.5,63.2,0],[179.1,92.7,1],[176.5,73.6,0],[177.8,93.6,1],[168.9,62,0],[175.3,70.9,1],[175.3,63.6,0],[182.9,75,1],[159.4,53.2,0],[170.8,93.2,1],[160,53.4,0],[188,93.2,1],[170.2,55,0],[180.3,77.7,1],[162.6,70.5,0],[177.8,61.4,1],[167.6,54.5,0],[185.4,94.1,1],[162.6,54.5,0],[168.9,75,1],[160.7,55.9,0],[185.4,83.6,1],[160,59,0],[180.3,85.5,1],[157.5,63.6,0],[174,73.9,1],[162.6,54.5,0],[167.6,66.8,1],[152.4,47.3,0],[182.9,87.3,1],[170.2,67.7,0],[160,72.3,1],[165.1,80.9,0],[180.3,88.6,1],[172.7,70.5,0],[167.6,75.5,1],[165.1,60.9,0],[186.7,101.4,1],[170.2,63.6,0],[175.3,91.1,1],[170.2,54.5,0],[175.3,67.3,1],[170.2,59.1,0],[175.9,77.7,1],[161.3,70.5,0],[175.3,81.8,1],[167.6,52.7,0],[179.1,75.5,1],[167.6,62.7,0],[181.6,84.5,1],[165.1,86.3,0],[177.8,76.6,1],[162.6,66.4,0],[182.9,85,1],[152.4,67.3,0],[177.8,102.5,1],[168.9,63,0],[184.2,77.3,1],[170.2,73.6,0],[179.1,71.8,1],[175.2,62.3,0],[176.5,87.9,1],[175.2,57.7,0],[188,94.3,1],[160,55.4,0],[174,70.9,1],[165.1,104.1,0],[167.6,64.5,1],[174,55.5,0],[170.2,77.3,1],[170.2,77.3,0],[167.6,72.3,1],[160,80.5,0],[188,87.3,1],[167.6,64.5,0],[174,80,1],[167.6,72.3,0],[176.5,82.3,1],[167.6,61.4,0],[180.3,73.6,1],[154.9,58.2,0],[167.6,74.1,1],[162.6,81.8,0],[188,85.9,1],[175.3,63.6,0],[180.3,73.2,1],[171.4,53.4,0],[167.6,76.3,1],[157.5,54.5,0],[183,65.9,1],[165.1,53.6,0],[183,90.9,1],[160,60,0],[179.1,89.1,1],[174,73.6,0],[170.2,62.3,1],[162.6,61.4,0],[177.8,82.7,1],[174,55.5,0],[179.1,79.1,1],[162.6,63.6,0],[190.5,98.2,1],[161.3,60.9,0],[177.8,84.1,1],[156.2,60,0],[180.3,83.2,1],[149.9,46.8,0],[180.3,83.2,1],[169.5,57.3,0],[160,64.1,0],[175.3,63.6,0],[169.5,67.3,0],[160,75.5,0],[172.7,68.2,0],[162.6,61.4,0],[157.5,76.8,0],[176.5,71.8,0],[164.4,55.5,0],[160.7,48.6,0],[174,66.4,0],[163.8,67.3,0]];
            // var rawData = [[157.5,76.8,0]];

            var FEMALE = 0;
            var MALE = 1;
            var DIMENSION_HEIGHT = 0;
            var DIMENSION_WEIGHT = 1;
            var DIMENSION_SEX = 2;
            var SYMBOL_RADIUS = 6;

            var HEIGHT_RANGES = [
                { min: 140, max: 160 },
                { min: 160, max: 180 },
                { min: 180, max: 200 }
            ];

            var State = {
                NONE: 0,
                HEIGHT_WEIGHT_SINGLE: 1,
                HEIGHT_WEIGHT_SEX_SEP: 2,
                COUNT_BY_HEIGHT_RANGE: 3
            };

            var currentState = State.NONE
            var countBySexHeightRangeMax = 0;

            function renderItem(seriesInfo, params, api) {
                if (currentState === State.NONE) {
                    return;
                }

                var sex = api.value(DIMENSION_SEX)
                var height = api.value(DIMENSION_HEIGHT);
                var weight = api.value(DIMENSION_WEIGHT);

                if (seriesInfo.sex !== sex) {
                    return;
                }
                if (height < seriesInfo.heightRange.min || height >= seriesInfo.heightRange.max) {
                    return;
                }

                var posX;
                var posY;
                if (currentState === State.COUNT_BY_HEIGHT_RANGE) {
                    var position = api.coord([sex, 0]);
                    posX = position[0];
                    var yStart = position[1];
                    position = api.coord([sex, seriesInfo.countBySexHeightRange]);
                    var yEnd = position[1];
                    if (params.context.displayIdx == null) {
                        params.context.displayIdx = 0;
                    }
                    else {
                        params.context.displayIdx++;
                    }
                    if (seriesInfo.countBySexHeightRange === 1) {
                        posY = yEnd;
                    }
                    else {
                        posY = yStart + (yEnd - yStart) / (seriesInfo.countBySexHeightRange - 1) * params.context.displayIdx;
                    }
                }
                else {
                    var position = api.coord([height, weight]);
                    posX = position[0];
                    posY = position[1];
                }

                var color = sex === FEMALE ? '#eb6134' : '#348feb'; // ? '#eb9934' : '#36b6d9';

                return {
                    type: 'circle',
                    x: posX,
                    y: posY,
                    shape: { cx: 0, cy: 0, r: SYMBOL_RADIUS },
                    style: {
                        fill: color,
                        opacity: 0.8
                        // stroke: '#555',
                        // lineWidth: 1
                    }
                };
            }

            function animationDelayUpdate(idx) {
                return idx;
            }

            var baseOption = {
                dataset: {
                    source: rawData
                },
                title: {
                    text: 'Height and Weight'
                },
                tooltip: {
                },
                toolbox: {
                    feature: {
                        dataZoom: {},
                        brush: {
                            type: ['rect', 'polygon', 'clear']
                        }
                    }
                },
                legend: {
                },
                brush: {
                },
                dataZoom: [{
                    type: 'slider',
                    left: 50,
                    right: 50,
                    height: 20,
                    xAxisIndex: 'all'
                }, {
                    type: 'inside',
                    xAxisIndex: 'all'
                }],
                series: []
            };

            var seriesInfoList = [];

            for (var i = 0, seriesInfo; i < HEIGHT_RANGES.length; i++) {
                seriesInfoList.push(seriesInfo = {
                    sex: FEMALE,
                    heightRange: HEIGHT_RANGES[i]
                });
                baseOption.series.push({
                    type: 'custom',
                    name: 'Female',
                    coordinateSystem: 'none',
                    animationDelayUpdate: animationDelayUpdate,
                    renderItem: echarts.util.curry(renderItem, seriesInfo)
                });
                seriesInfoList.push(seriesInfo = {
                    sex: MALE,
                    heightRange: HEIGHT_RANGES[i]
                });
                baseOption.series.push({
                    type: 'custom',
                    name: 'Male',
                    coordinateSystem: 'none',
                    animationDelayUpdate: animationDelayUpdate,
                    renderItem: echarts.util.curry(renderItem, seriesInfo)
                });
            }

            makeCountByHeightRange(rawData, seriesInfoList);

            function makeCountByHeightRange(rawData, seriesInfoList) {
                for (var i = 0; i < rawData.length; i++) {
                    var rawDataItem = rawData[i];
                    var val = rawDataItem[DIMENSION_HEIGHT];

                    for(var j = 0; j < seriesInfoList.length; j++) {
                        var seriesInfo = seriesInfoList[j];

                        if (seriesInfo.sex === rawDataItem[DIMENSION_SEX]
                            && seriesInfo.heightRange.min <= val
                            && val < seriesInfo.heightRange.max
                        ) {
                            if (seriesInfo.countBySexHeightRange == null) {
                                seriesInfo.countBySexHeightRange = 0;
                            }
                            seriesInfo.countBySexHeightRange++;
                            countBySexHeightRangeMax = Math.max(
                                countBySexHeightRangeMax, seriesInfo.countBySexHeightRange
                            );
                        }
                    }
                }
            }

            var makeStateOption = {};

            makeStateOption[State.HEIGHT_WEIGHT_SINGLE] = function () {
                var option = {
                    dataZoom: [{
                        xAxisIndex: 'all'
                    }, {
                        xAxisIndex: 'all'
                    }],
                    grid: [{
                        bottom: 80
                    }],
                    xAxis: [{
                        scale: true,
                        axisLabel: { formatter: '{value} cm' },
                        splitLine: { show: false }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLabel: { formatter: '{value} kg' },
                        splitLine: { show: false }
                    }],
                    series: []
                };
                for (var i = 0; i < baseOption.series.length; i++) {
                    option.series.push({
                        coordinateSystem: 'cartesian2d',
                        encode: {
                            x: DIMENSION_HEIGHT,
                            y: DIMENSION_WEIGHT,
                            label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT]
                        },
                        xAxisIndex: 0,
                        yAxisIndex: 0
                    });
                }
                return option;
            };

            makeStateOption[State.HEIGHT_WEIGHT_SEX_SEP] = function () {
                var option = {
                    dataZoom: [{
                        xAxisIndex: 'all'
                    }, {
                        xAxisIndex: 'all'
                    }],
                    grid: [{
                        right: '55%',
                        bottom: 80,
                    }, {
                        left: '55%',
                        bottom: 80,
                    }],
                    xAxis: [{
                        scale: true,
                        gridIndex: 0,
                        axisLabel: { formatter: '{value} cm' },
                        splitLine: { show: false }
                    }, {
                        scale: true,
                        gridIndex: 1,
                        axisLabel: { formatter: '{value} cm' },
                        splitLine: { show: false }
                    }],
                    yAxis: [{
                        scale: true,
                        gridIndex: 0,
                        axisLabel: { formatter: '{value} kg' },
                        splitLine: { show: false }
                    }, {
                        scale: true,
                        gridIndex: 1,
                        axisLabel: { formatter: '{value} kg' },
                        splitLine: { show: false }
                    }],
                    series: []
                };
                for (var i = 0; i < baseOption.series.length; i++) {
                    var axisIndex = seriesInfoList[i].sex === FEMALE ? 0 : 1;
                    console.log(axisIndex, seriesInfoList[i]);
                    option.series.push({
                        coordinateSystem: 'cartesian2d',
                        encode: {
                            x: DIMENSION_HEIGHT,
                            y: DIMENSION_WEIGHT,
                            label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT]
                        },
                        xAxisIndex: axisIndex,
                        yAxisIndex: axisIndex
                    });
                }
                return option;
            };

            makeStateOption[State.COUNT_BY_HEIGHT_RANGE] = function () {
                var yMax = Math.round(countBySexHeightRangeMax * 1.2);

                var option = {
                    dataZoom: [{
                        xAxisIndex: 'none'
                    }, {
                        xAxisIndex: 'none'
                    }],
                    grid: [{
                        left: '10%',
                        width: '20%',
                        top: 90,
                        bottom: 80,
                    }, {
                        left: '40%',
                        width: '20%',
                        top: 90,
                        bottom: 80,
                    }, {
                        left: '75%',
                        width: '20%',
                        top: 90,
                        bottom: 80,
                    }],
                    xAxis: [{
                        type: 'category',
                        name: HEIGHT_RANGES[0].min + ' cm ~ ' + HEIGHT_RANGES[0].max + ' cm',
                        nameLocation: 'center',
                        nameGap: 20,
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        gridIndex: 0,
                        splitLine: { show: false }
                    }, {
                        type: 'category',
                        name: HEIGHT_RANGES[1].min + ' cm ~ ' + HEIGHT_RANGES[1].max + ' cm',
                        nameLocation: 'center',
                        nameGap: 20,
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        gridIndex: 1,
                        splitLine: { show: false }
                    }, {
                        type: 'category',
                        name: HEIGHT_RANGES[2].min + ' cm ~ ' + HEIGHT_RANGES[2].max + ' cm',
                        nameLocation: 'center',
                        nameGap: 20,
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        gridIndex: 2,
                        splitLine: { show: false }
                    }],
                    yAxis: [{
                        gridIndex: 0,
                        name: 'persons',
                        axisLabel: { formatter: '{value}' },
                        max: yMax,
                        min: 0,
                        splitLine: { show: false }
                    }, {
                        gridIndex: 1,
                        name: 'persons',
                        axisLabel: { formatter: '{value}' },
                        max: yMax,
                        min: 0,
                        splitLine: { show: false }
                    }, {
                        gridIndex: 2,
                        name: 'persons',
                        axisLabel: { formatter: '{value}' },
                        max: yMax,
                        min: 0,
                        splitLine: { show: false }
                    }],
                    series: []
                };

                for (var i = 0; i < baseOption.series.length; i++) {
                    var axisIndex = HEIGHT_RANGES.indexOf(seriesInfoList[i].heightRange);
                    option.series.push({
                        coordinateSystem: 'cartesian2d',
                        encode: {
                            x: DIMENSION_SEX,
                            y: -1,
                            label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT]
                        },
                        xAxisIndex: axisIndex,
                        yAxisIndex: axisIndex
                    });
                }

                return option;
            };

            function changeState(state) {
                currentState = state;
                var option = makeStateOption[state]();
                chart.setOption(option, {
                    replaceMerge: ['grid', 'xAxis', 'yAxis']
                });
            }

            var chart = testHelper.create(echarts, 'transition_dots', {
                title: [
                    'Transition case:',
                    'click btns one by one',
                ],
                option: baseOption,
                lazyUpdate: true,
                height: 600,
                buttons: [{
                    text: 'scatter by sex',
                    onclick: function () {
                        changeState(State.HEIGHT_WEIGHT_SEX_SEP);
                    }
                }, {
                    text: 'count by height range',
                    onclick: function () {
                        changeState(State.COUNT_BY_HEIGHT_RANGE);
                    }
                }, {
                    text: 'one grid',
                    onclick: function () {
                        changeState(State.HEIGHT_WEIGHT_SINGLE);
                    }
                }]
            });

            changeState(State.HEIGHT_WEIGHT_SINGLE);

        });
        </script>


    </body>
</html>