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


        <div class="chart" id="chart-1"></div>
        <div class="chart" id="chart0"></div>
        <div class="chart" id="chart1"></div>
        <div class="chart" id="chart2"></div>
        <div class="chart" id="chart3"></div>


        <script>

            require([
                'data/rainfall.json.js',
                'echarts'
            ], function (rainfallData, echarts) {

                var option = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    dataZoom: {
                        show: true,
                        realtime: true,
                        startValue: '2009-09-20 12:00',
                        end: 100
                    },
                    xAxis : [
                        {
                            type : 'time',
                            // splitNumber: 20,
                            axisLabel: {
                                formatter: function (value) {
                                    return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
                                }
                            }
                        }
                    ],
                    yAxis : [
                        {
                            name: '流量(m^3/s)'
                        }
                    ],
                    series : [
                        {
                            name: '流量',
                            type: 'line',
                            symbol: 'none',
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: rainfallData.flow.map(function (val, idx) {
                                return [+(new Date(rainfallData.category[idx])), val];
                            })
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'chart-1', {
                    title: [
                        'The last x label should not be displayed (overlap).'
                    ],
                    option: option,
                    info: option.xAxis,
                    infoKey: 'xAxis'
                });
            })

        </script>


        <script>

            require([
                'data/rainfall.json.js',
                'echarts'
            ], function (rainfallData, echarts) {

                var chart = echarts.init(document.getElementById('chart0'), null, {

                });

                var option = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    grid: {
                        bottom: 150
                    },
                    dataZoom: {
                        show: true,
                        realtime: true,
                        startValue: '2009-09-20 12:00',
                        end: 100
                    },
                    xAxis : [
                        {
                            type : 'time',
                            // splitNumber: 20,
                            axisLabel: {
                                rotate: 45,
                                formatter: function (value) {
                                    return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
                                }
                            }
                        }
                    ],
                    yAxis : [
                        {
                            name: '流量(m^3/s)'
                        }
                    ],
                    series : [
                        {
                            name: '流量',
                            type: 'line',
                            symbol: 'none',
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: rainfallData.flow.map(function (val, idx) {
                                return [+(new Date(rainfallData.category[idx])), val];
                            })
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'chart0', {
                    title: [
                        'The last x label shoule be displayed (not overlap).'
                    ],
                    option: option,
                    info: option.xAxis,
                    infoKey: 'xAxis'
                });
            })

        </script>


        <script>

            require([
                'data/rainfall.json.js',
                'echarts'
            ], function (rainfallData, echarts) {

                var chart = echarts.init(document.getElementById('chart1'), null, {

                });

                var option = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    dataZoom: {
                        show: true,
                        realtime: true,
                        startValue: '2009-09-20 12:00',
                        end: 100
                    },
                    xAxis : [
                        {
                            type : 'time',
                            // splitNumber: 20,
                            axisLabel: {
                                showMaxLabel: true,
                                showMinLabel: true,
                                formatter: function (value) {
                                    return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
                                }
                            }
                        }
                    ],
                    yAxis : [
                        {
                            name: '流量(m^3/s)',
                            position: 'right',
                            axisLabel: {
                                inside: true,
                                showMaxLabel: false,
                                formatter: '{value}\n'
                            }
                        }
                    ],
                    series : [
                        {
                            name: '流量',
                            type: 'line',
                            symbol: 'none',
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: rainfallData.flow.map(function (val, idx) {
                                return [+(new Date(rainfallData.category[idx])), val];
                            })
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'chart1', {
                    title: [
                        'The last x label should be displayed. The top tick on y should not be displayed.'
                    ],
                    option: option,
                    info: {
                        yAxis: option.yAxis,
                        xAxis: option.xAxis
                    }
                });
            })

        </script>


        <script>

            require([
                'data/rainfall.json.js',
                'echarts'
            ], function (rainfallData, echarts) {

                var chart = echarts.init(document.getElementById('chart1'), null, {

                });

                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataZoom: {
                        show: true,
                        realtime: true,
                        startValue: '2009-09-20 12:00',
                        end: 100
                    },
                    xAxis: {
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            showMaxLabel: true,
                            showMinLabel: true,
                            formatter: function (value) {
                                return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
                            }
                        },
                        data: rainfallData.flow.map(function (val, idx) {
                            return rainfallData.category[idx];
                        })
                    },
                    yAxis: {
                        name: '流量(m^3/s)',
                        axisLabel: {
                            inside: true,
                            showMaxLabel: false,
                            formatter: '{value}\n'
                        }
                    },
                    series: [
                        {
                            name: '流量',
                            type: 'line',
                            symbol: 'none',
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: rainfallData.flow.map(function (val, idx) {
                                return val;
                            })
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'chart2', {
                    title: [
                        'category xAxis:The min and max x label should be displayed.'
                    ],
                    option: option,
                    info: {
                        axisLabel: option.xAxis.axisLabel,
                        axisTick: option.xAxis.axisTick
                    },
                    infoKey: 'xAxis'
                });
            })

        </script>


        <script>

            require([
                'data/rainfall.json.js',
                'echarts'
            ], function (rainfallData, echarts) {

                var chart = echarts.init(document.getElementById('chart1'), null, {

                });

                var option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    grid: [{
                        height: 80,
                        width: '40%',
                        containLabel: true
                    }, {
                        height: 80,
                        right: 10,
                        width: '40%',
                        containLabel: true
                    }],
                    xAxis: [{
                        type: 'value'
                    }, {
                        type: 'value',
                        gridIndex: 1
                    }],
                    yAxis: [{
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                fontSize: 18
                            }
                        },
                        type: 'category',
                        data: ['周 A','周 B','周 C','周 D','周 E','周 F','周 G']
                    }, {
                        gridIndex: 1,
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                fontSize: 18
                            },
                            showMinLabel: false,
                            showMaxLabel: false
                        },
                        type: 'category',
                        data: ['周 A','周 B','周 C','周 D','周 E','周 F','周 G']
                    }],
                    series: [{
                        type: 'bar',
                        data: [320, 302, 301, 334, 390, 330, 320]
                    }, {
                        type: 'bar',
                        data: [325, 102, 201, 84, 190, 230, 120],
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }]
                };

                var chart = testHelper.create(echarts, 'chart3', {
                    title: [
                        'category yAxis: all Label should be displayed.',
                        'axisLabel.interval is 0, showMaxLabel/showMinLabel should be ignored.'
                    ],
                    option: option,
                    info: {
                        yAxis0: {
                            axisLabel: option.xAxis[0].axisLabel,
                            axisTick: option.xAxis[0].axisTick
                        },
                        yAxis1: {
                            axisLabel: option.xAxis[1].axisLabel,
                            axisTick: option.xAxis[1].axisTick
                        }
                    },
                    infoKey: 'xAxis'
                });
            })

        </script>


    </body>
</html>