test/graphic-transition.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="lib/perlin.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>



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




        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option = {
                graphic: {
                    elements: [{
                        type: 'circle',
                        left: 'left',
                        y: 100,
                        transition: ['x', 'y'],
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: 50
                        },
                        style: {
                            fill: 'orange'
                        }
                    }]
                }
            }

            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'Transform transition'
                ],
                option: option,
                buttons: [
                    {
                        text: 'Move to x: 200',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        left: null,
                                        top: null,
                                        x: 200
                                    }]
                                }
                            })
                        }
                    },


                    {
                        text: 'Move to y: 200',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        left: null,
                                        top: null,
                                        y: 200
                                    }]
                                }
                            })
                        }
                    },

                    {
                        text: 'Move to x: 100, y: 50',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        left: null,
                                        top: null,
                                        x: 100,
                                        y: 50
                                    }]
                                }
                            })
                        }
                    },

                    {
                        text: 'Move to center',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        left: 'center',
                                        top: 'center'
                                    }]
                                }
                            })
                        }
                    },

                    {
                        text: 'Move to top right',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        left: 'right',
                                        top: 'top'
                                    }]
                                }
                            })
                        }
                    }
                ]
            });

        });
        </script>


        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {
            var option = {
                graphic: {
                    elements: [{
                        type: 'circle',
                        x: 100,
                        y: 50,
                        transition: 'all',
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: 50
                        },
                        style: {
                            fill: 'orange'
                        }
                    }]
                }
            }

            var chart = testHelper.create(echarts, 'main1', {
                title: [
                    'Transition all'
                ],
                option: option,
                buttons: [
                    {
                        text: 'Randomize',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        x: Math.random() * (chart.getWidth() - 100) + 50,
                                        y: Math.random() * (chart.getHeight() - 100) + 50,
                                        shape: {
                                            r: Math.random() * 40 + 10
                                        },
                                        style: {
                                            fill: echarts.color.random()
                                        }
                                    }]
                                }
                            })
                        }
                    },
                ]
            });

        });
        </script>






        <script>
        require(['echarts'/*, 'map/js/china' */], function (echarts) {

            var elements = [{
                type: 'circle',
                name: 'target',
                x: 300,
                y: 100,
                shape: {
                    cx: 0,
                    cy: 0,
                    r: 100
                },
                style: {
                    fill: 'gray'
                }
            }]
            var option = {
                graphic: {
                    elements: elements
                }
            }

            var chart = testHelper.create(echarts, 'main2', {
                title: [
                    'Enter / Leave transition'
                ],
                option: option,
                buttons: [
                    {
                        text: 'Create',
                        onclick() {
                            elements[1] = {
                                type: 'circle',
                                name: 'center',
                                x: 300,
                                y: 100,
                                enterFrom: {
                                    x: 0,
                                    y: 100,
                                    shape: {
                                        r: 0
                                    }
                                },
                                leaveTo: {
                                    x: 500,
                                    y: 100,
                                    shape: {
                                        r: 0
                                    }
                                },
                                shape: {
                                    cx: 0,
                                    cy: 0,
                                    r: 80
                                },
                                style: {
                                    fill: 'orange'
                                }
                            };
                            chart.setOption(option)
                        }
                    },
                    {
                        text: 'Replace',
                        onclick() {
                            elements[1] = {
                                type: 'circle',
                                name: 'center',
                                $action: 'replace',
                                x: 300,
                                y: 100,
                                enterFrom: {
                                    x: 0,
                                    y: 100,
                                    shape: {
                                        r: 0
                                    }
                                },
                                leaveTo: {
                                    x: 500,
                                    y: 100,
                                    shape: {
                                        r: 0
                                    }
                                },
                                shape: {
                                    cx: 0,
                                    cy: 0,
                                    r: 80
                                },
                                style: {
                                    fill: echarts.color.random()
                                }
                            };
                            chart.setOption(option)
                        }
                    },
                    {
                        text: 'Remove',
                        onclick() {
                            elements[1] = {
                                $action: 'remove'
                            };
                            chart.setOption(option)
                        }
                    },
                ]
            });
        });
        </script>


        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                // During transition
                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Enter / Leave transition'
                    ]
                });

                const width = chart.getWidth();
                const height = chart.getHeight();

                const elements = [];
                for (let x = 20; x < width; x += 40) {
                    for (let y = 20; y < height; y += 40) {
                        const rand = noise.perlin2(x / 200, y / 200 + 10);
                        elements.push({
                            type: 'circle',
                            x: x,
                            y: y,
                            enterFrom: {
                                extra: {
                                    time: 0
                                }
                            },
                            enterAnimation: {
                                duration: 1e6,
                                easing: 'linear'
                            },
                            extra: {
                                time: 1e6
                            },
                            during(api) {
                                const r = Math.sin(rand * 100 + api.getExtra('time') / 200) * 5 + 5;
                                api.setShape('r', r);
                            },
                            shape: {
                                cx: 0,
                                cy: 0,
                                r: 10
                            }
                        });
                    }
                }

                chart.setOption({
                    graphic: {
                        elements
                    }
                })
            });
        </script>

        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var option;

                // Different animation config
            });
        </script>
    </body>
</html>