<html>
    <head>
        <meta charset="utf-8">
        <script src="../common/esl.js"></script>
        <script src="../common/config.js"></script>
        <link rel="stylesheet" href="../common/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>

        <script>

            // Schema:
            // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
            var schema = [
                {name: 'date', index: 0, text: '日期'},
                {name: 'AQIindex', index: 1, text: 'AQI指数'},
                {name: 'PM25', index: 2, text: 'PM2.5'},
                {name: 'PM10', index: 3, text: 'PM10'},
                {name: 'CO', index: 4, text: '一氧化碳 (CO)'},
                {name: 'NO2', index: 5, text: '二氧化氮 (NO2)'},
                {name: 'SO2', index: 6, text: '二氧化硫 (SO2)'}
            ];

            require([
                'data/aqi/BJdata',
                'data/aqi/GZdata',
                'data/aqi/SHdata',
                'echarts',
                'common/dark'
            ], function (dataBJ, dataGZ, dataSH, echarts) {

                var chart = echarts.init(document.getElementById('main'), 'dark');

                var grids = [];
                var xAxes = [];
                var yAxes = [];
                var series = [];

                var dimSize = 6;
                var nameList = ['北京', '广州', '上海'];

                for (var i = 1; i < dimSize; i++) {
                    for (var j = 1; j < dimSize; j++) {
                        // if (i !== j) {
                            grids.push({
                                left: ((i - 1) / dimSize * 100 + 7) + '%',
                                top: ((j - 1) / dimSize * 100 + 7) + '%',
                                width: '15%',
                                height: '15%'
                            });
                            xAxes.push({
                                gridIndex: grids.length - 1,
                                axisLabel: {
                                    show: j === dimSize - 1
                                },
                                axisTick: {
                                    show: j === dimSize - 1
                                },
                                name: j === dimSize - 1 ? schema[i].text : '',
                                nameLocation: 'middle',
                                nameGap: 30,
                                splitNumber: 3
                            });
                            yAxes.push({
                                gridIndex: grids.length - 1,
                                axisLabel: {
                                    show: i === 1
                                },
                                axisTick: {
                                    show: i === 1
                                },
                                name: i === 1 ? schema[j].text : '',
                                nameLocation: 'middle',
                                nameGap: 30,
                                splitNumber: 4
                            });
                            var color = ['#5793f3', '#d14a61', '#fd9c35'];
                            [dataBJ, dataGZ, dataSH].forEach(function (data, idx) {
                                series.push({
                                    hoverAnimation: false,
                                    name: nameList[idx],
                                    type: 'scatter',
                                    xAxisIndex: xAxes.length - 1,
                                    yAxisIndex: yAxes.length - 1,
                                    data: data.map(function (item) {
                                        return [item[i], item[j]];
                                    }),
                                    itemStyle: {
                                        normal: {
                                            color: color[idx]
                                        }
                                    }
                                });
                            });
                        // }
                    }
                }

                chart.setOption({
                    legend: {
                        orient: 'vertical',
                        data: nameList,
                        right: 2,
                        top: 'center'
                    },
                    animation: false,
                    grid: grids,
                    xAxis: xAxes,
                    yAxis: yAxes,
                    series: series
                });

            });

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