test/bar-race.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">
        <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>
        <link rel="stylesheet" href="lib/reset.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
        </style>

        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main3"></div>
        <div id="main4"></div>


        <script>

        require([
            'echarts',
            'data/life-expectancy-table.json'
        ], function (echarts, data) {
            var updateFrequency = 5000;
            var dimension = 1;

            var years = [];
            for (var i = 0; i < data.length; ++i) {
                if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
                    years.push(data[i][4]);
                }
            }

            var option = {
                grid: {
                    left: 150,
                    right: 150
                },
                xAxis: {
                    max: 'dataMax',
                    label: {
                        formatter: function (n) {
                            return Math.round(n);
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'red'
                        }
                    }
                },
                dataset: {
                    source: data.slice(1).filter(d => {
                        return d[4] === 1800;
                    })
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    max: 10,
                    axisLabel: {
                        show: true
                    },
                    animationDuration: 300,
                    animationDurationUpdate: 300
                },
                series: [{
                    realtimeSort: true,
                    seriesLayoutBy: 'column',
                    type: 'bar',
                    encode: {
                        x: dimension,
                        y: 3
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function (param) {
                            return param.value[dimension];
                        },
                        valueAnimation: true,
                        fontFamily: 'monospace'
                    }
                }],
                animationDurationUpdate: updateFrequency,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear',
                graphic: {
                    elements: [{
                        type: 'text',
                        right: 160,
                        bottom: 60,
                        style: {
                            text: '1960',
                            font: 'bolder 80px monospace',
                            fill: 'rgba(100, 100, 100, 0.25)'
                        },
                        z: 100
                    }]
                }
            };

            for (var i = 1; i < years.length; ++i) {
                (function (i) {
                    setTimeout(function () {
                        updateYear(years[i + 1]);
                    }, (i - 1) * updateFrequency);
                })(i);
            }

            function updateYear(year) {
                var source = data.slice(1).filter(d => {
                    return d[4] === year;
                });
                option.series[0].data = source;
                option.graphic.elements[0].style.text = year;
                chart.setOption(option);
            }

            var chart = testHelper.create(echarts, 'main1', {
                title: [
                    'Bar Racing'
                ],
                option: option
            });
        });
        </script>



        <script>

        require([
            'echarts'
        ],
            function (echarts) {
                var option = {
                    xAxis: {
                        max: 'dataMax'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C', 'D'],
                        inverse: true,
                        axisLabel: {
                            formatter: function (label, id) {
                                return label + 0 + id;
                            }
                        },
                        animationDuration: 300,
                        animationDurationUpdate: 300,
                        max: 2
                    },
                    series: [{
                        realtimeSort: true,
                        name: 'X',
                        type: 'bar',
                        data: [{
                            value: 120,
                            itemStyle: {
                                color: 'red'
                            }
                        }, {
                            value: 200,
                            itemStyle: {
                                color: 'orange'
                            }
                        }, {
                            value: 90,
                            itemStyle: {
                                color: 'yellow'
                            }
                        }, {
                            value: 240,
                            itemStyle: {
                                color: 'green'
                            }
                        }],
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}元',
                            valueAnimation: true
                        }
                    }],
                    legend: {
                        show: true
                    },
                    animationDurationUpdate: 5000,
                    animationEasing: 'linear',
                    animationEasingUpdate: 'linear'
                };

                setTimeout(() => {
                    var data = option.series[0].data;
                    data[1].value += 100;
                    chart.setOption(option);
                }, 1000);

                setTimeout(() => {
                    var data = option.series[0].data;
                    data[3].value += 100;
                    chart.setOption(option);
                }, 3400);

                const buttons = [];
                const texts = ['A++', 'B++', 'C++', 'D++'];
                for (var x = 0; x < 4; ++x) {
                    (function (x) {
                        buttons.push({
                            text: texts[x],
                            onclick() {
                                var data = option.series[0].data;
                                data[x].value += Math.round(100 * Math.random());
                                chart.setOption(option);
                            }
                        });
                    })(x);
                }

                var chart = testHelper.create(echarts, 'main2', {
                    title: [
                        'Update Data Dynamically'
                    ],
                    option: option,
                    buttons
                });
            }
        );
        </script>



        <script>

        require(['echarts'],
            function (echarts) {

                var option = {
                    title: {
                        text: 'When yAxis max is larger than yAxis data length, it should not get error'
                    },
                    xAxis: {
                    },
                    yAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C'],
                        max: 5
                    },
                    series: [{
                        realtimeSort: true,
                        type: 'bar',
                        data: [10, 8, 2]
                    }]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'When yAxis max is larger than yAxis data length, it should not get error'
                    ],
                    option: option
                });
            }

        );
        </script>

        <script>

            require(['echarts'],
                function (echarts) {
                    var data = [0, 1, 10, 100, 1000];
                    var option = {
                        xAxis: {
                            type: 'log'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['a', 'b', 'c', 'd', 'e']
                        },
                        series: [{
                            type: 'bar',
                            data: data,
                            label: {
                                show: true,
                                position: 'right',
                                valueAnimation: true
                            }
                        }]
                    };

                    var chart = testHelper.create(echarts, 'main4', {
                        title: [
                            'click "all +10"',
                            'check the x extent should be correct',
                            'the 0 bar should be displayed with animation'
                        ],
                        option: option,
                        buttons: [{
                            text: 'all +10',
                            onclick: function () {
                                for (var i = 0; i < data.length; i++) {
                                    data[i] += 10;
                                }
                                chart.setOption({
                                    series: {
                                        data: data
                                    }
                                });
                            }
                        }]
                    });
                }
            );
        </script>

        <script>
        require(['echarts'],
            function (echarts) {
                var data = [4000, 3000, 2000];
                var option = {
                    xAxis: {
                    },
                    yAxis: {
                        type: 'category',
                        data: ['a', 'b', 'c'],
                        max: 1,
                        inverse: true,
                        animationDuration: 300,
                        animationDurationUpdate: 300
                    },
                    series: [{
                        realtimeSort: true,
                        type: 'bar',
                        data: data,
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true
                        },
                        animationDuration: 0,
                        animationDurationUpdate: 5000,
                        animationEasing: 'linear',
                        animationEasingUpdate: 'linear'
                    }]
                };

                var chart = testHelper.create(echarts, 'main4', {
                    title: [
                    ],
                    option: option,
                    buttons: [{
                        text: 'next',
                        onclick: function () {
                            data[0] += 300;
                            data[1] += 2000;
                            data[2] += 2800;
                            chart.setOption({
                                series: {
                                    data: data
                                }
                            });
                        }
                    }]
                });
            }
        );
        </script>
    </body>
</html>