<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id="main"></div>
        <script>

            require([
                'echarts',
                'echarts/chart/line',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/toolbox',
                'echarts/component/title',
                'echarts/component/dataZoom'
            ], function (echarts) {

                chart = echarts.init(document.getElementById('main'), null, {
                    renderer: 'canvas'
                });

                chart.setOption({
                    toolbox: {
                        show : true,
                        feature : {
                            dataZoom: {show: true},
                            restore: {show: true}
                        }
                    },
                    animationDurationUpdate: 4000,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['a', 'b', 'c', 'd']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            type:'line',
                            data: [
                                200, 100, 500, 300
                            ]
                        }
                    ]
                });
            })


            // setTimeout(function () {
            //     chart.setOption({
            //         xAxis: {
            //             data: ['b', 'c', 'd', 'e']
            //         },
            //         series: [
            //             {
            //                 data: [
            //                      100, 500, 300, 900
            //                 ]
            //             }
            //         ]
            //     })
            // }, 3000);

            setTimeout(function () {
                chart.setOption({
                    xAxis: {
                        data: ['a', 'd', 'c', 'b']
                    },
                    series: [
                        {
                            data: [
                                200, 300, 500, 100
                            ]
                        }
                    ]
                })
            }, 3000);

        </script>
    </body>
</html>