
<!--
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/esl.js"></script>
        <script src="lib/config.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;
                height: 60px;
                background: #e0ebff;
                text-align: center;
                font-weight: bold;
                font-size: 14px;
            }
            .chart {
                height: 500px;
            }
        </style>

        <h1>normal</h1>
        <div class="chart" id="main0"></div>
        <h1>data column 0 and column 2 is not used.</h1>
        <div class="chart" id="main1"></div>
        <h1>category is not specified but auto-collected.</h1>
        <div class="chart" id="main2"></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)'},
                {name: '等级', index: 7, text: '等级'}
            ];

        </script>


        <script>

            require([
                'data/aqi/BJdata',
                'data/aqi/GZdata',
                'data/aqi/SHdata',
                'echarts'
            ], function (dataBJ, dataGZ, dataSH, echarts) {
                var zrUtil = echarts.util;

                var lineStyle = {
                    normal: {
                        width: 1
                    }
                };

                var option = {
                    aria: {
                        show: true
                    },
                    animation: true,
                    legend: {
                        bottom: 30,
                        data: ['北京', '上海', '广州'],
                        itemGap: 20,
                        textStyle: {
                            // color: '#fff',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        padding: 10,
                        backgroundColor: '#222',
                        borderColor: '#777',
                        borderWidth: 1,
                        formatter: function (obj) {
                            var value = obj[0].value;
                            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                                + obj[0].seriesName + ' ' + value[0] + '日期：'
                                + value[7]
                                + '</div>'
                                + schema[1].text + '：' + value[1] + '<br>'
                                + schema[2].text + '：' + value[2] + '<br>'
                                + schema[3].text + '：' + value[3] + '<br>'
                                + schema[4].text + '：' + value[4] + '<br>'
                                + schema[5].text + '：' + value[5] + '<br>'
                                + schema[6].text + '：' + value[6] + '<br>';
                        }
                    },
                    visualMap: {
                        show: true,
                        min: 0,
                        max: 150,
                        top: 'center',
                        dimension: 2,
                        inRange: {
                            color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                        },
                        outOfRange: {
                            color: ['#ccc'],
                            opacity: 0.001
                        }
                    },
                    parallelAxis: [
                        {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
                        {dim: 1, name: schema[1].text},
                        {dim: 2, name: schema[2].text},
                        {dim: 3, name: schema[3].text},
                        {dim: 4, name: schema[4].text},
                        {dim: 5, name: schema[5].text},
                        {dim: 6, name: schema[6].text},
                        {dim: 7, name: schema[7].text,
                            type: 'category',
                            data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                        }
                    ],
                    parallel: {
                        bottom: 100,
                        parallelAxisDefault: {
                            type: 'value',
                            name: 'AQI指数',
                            nameLocation: 'end',
                            nameGap: 20,
                            tooltip: {
                                show: true
                            },
                            nameTextStyle: {
                                fontSize: 14
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    },
                    series: [
                        {
                            name: '北京',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataBJ
                        },
                        {
                            name: '上海',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataSH
                        },
                        {
                            name: '广州',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataGZ
                        }
                    ]
                };

                var chart = testHelper.createChart(echarts, 'main0', option);

                chart && chart.on('axisAreaSelected', function (event) {
                    var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
                    console.log('北京: ', indices);
                });
            });

        </script>


        <script>

            require([
                'data/aqi/BJdata',
                'data/aqi/GZdata',
                'data/aqi/SHdata',
                'echarts'
            ], function (dataBJ, dataGZ, dataSH, echarts) {
                var zrUtil = echarts.util;

                var lineStyle = {
                    normal: {
                        width: 1
                    }
                };

                var option = {
                    animation: true,
                    legend: {
                        bottom: 30,
                        data: ['北京', '上海', '广州'],
                        itemGap: 20,
                        textStyle: {
                            // color: '#fff',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        padding: 10,
                        backgroundColor: '#222',
                        borderColor: '#777',
                        borderWidth: 1,
                        formatter: function (obj) {
                            var value = obj[0].value;
                            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                                + obj[0].seriesName + ' ' + value[0] + '日期：'
                                + value[7]
                                + '</div>'
                                + schema[1].text + '：' + value[1] + '<br>'
                                + schema[2].text + '：' + value[2] + '<br>'
                                + schema[3].text + '：' + value[3] + '<br>'
                                + schema[4].text + '：' + value[4] + '<br>'
                                + schema[5].text + '：' + value[5] + '<br>'
                                + schema[6].text + '：' + value[6] + '<br>';
                        }
                    },
                    visualMap: {
                        show: true,
                        min: 0,
                        max: 150,
                        top: 'center',
                        dimension: 2,
                        inRange: {
                            color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                        },
                        outOfRange: {
                            color: ['#ccc'],
                            opacity: 0.001
                        }
                    },
                    parallelAxis: [
                        // {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
                        {dim: 1, name: schema[1].text},
                        // {dim: 2, name: schema[2].text},
                        {dim: 3, name: schema[3].text},
                        {dim: 4, name: schema[4].text},
                        {dim: 5, name: schema[5].text},
                        {dim: 6, name: schema[6].text},
                        {dim: 7, name: schema[7].text,
                            type: 'category',
                            data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                        }
                    ],
                    parallel: {
                        bottom: 100,
                        parallelAxisDefault: {
                            type: 'value',
                            name: 'AQI指数',
                            nameLocation: 'end',
                            nameGap: 20,
                            tooltip: {
                                show: true
                            },
                            nameTextStyle: {
                                fontSize: 14
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    },
                    series: [
                        {
                            name: '北京',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataBJ
                        },
                        {
                            name: '上海',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataSH
                        },
                        {
                            name: '广州',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataGZ
                        }
                    ]
                };

                var chart = testHelper.createChart(echarts, 'main1', option);

                chart && chart.on('axisAreaSelected', function (event) {
                    var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
                    console.log('北京: ', indices);
                });
            });

        </script>


        <script>

            require([
                'data/aqi/BJdata',
                'data/aqi/GZdata',
                'data/aqi/SHdata',
                'echarts'
            ], function (dataBJ, dataGZ, dataSH, echarts) {
                var zrUtil = echarts.util;

                var lineStyle = {
                    normal: {
                        width: 1
                    }
                };

                var option = {
                    animation: true,
                    legend: {
                        bottom: 30,
                        data: ['北京', '上海', '广州'],
                        itemGap: 20,
                        textStyle: {
                            // color: '#fff',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        padding: 10,
                        backgroundColor: '#222',
                        borderColor: '#777',
                        borderWidth: 1,
                        formatter: function (obj) {
                            var value = obj[0].value;
                            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                                + obj[0].seriesName + ' ' + value[0] + '日期：'
                                + value[7]
                                + '</div>'
                                + schema[1].text + '：' + value[1] + '<br>'
                                + schema[2].text + '：' + value[2] + '<br>'
                                + schema[3].text + '：' + value[3] + '<br>'
                                + schema[4].text + '：' + value[4] + '<br>'
                                + schema[5].text + '：' + value[5] + '<br>'
                                + schema[6].text + '：' + value[6] + '<br>';
                        }
                    },
                    visualMap: {
                        show: true,
                        min: 0,
                        max: 150,
                        top: 'center',
                        dimension: 2,
                        inRange: {
                            color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                        },
                        outOfRange: {
                            color: ['#ccc'],
                            opacity: 0.001
                        }
                    },
                    parallelAxis: [
                        // {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
                        {dim: 1, name: schema[1].text},
                        // {dim: 2, name: schema[2].text},
                        {dim: 3, name: schema[3].text},
                        {dim: 4, name: schema[4].text},
                        {dim: 5, name: schema[5].text},
                        {dim: 6, name: schema[6].text},
                        {dim: 7, name: schema[7].text,
                            type: 'category'
                            // data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
                        }
                    ],
                    parallel: {
                        bottom: 100,
                        parallelAxisDefault: {
                            type: 'value',
                            name: 'AQI指数',
                            nameLocation: 'end',
                            nameGap: 20,
                            tooltip: {
                                show: true
                            },
                            nameTextStyle: {
                                fontSize: 14
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    },
                    series: [
                        {
                            name: '北京',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataBJ
                        },
                        {
                            name: '上海',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataSH
                        },
                        {
                            name: '广州',
                            type: 'parallel',
                            lineStyle: lineStyle,
                            data: dataGZ
                        }
                    ]
                };

                var chart = testHelper.createChart(echarts, 'main2', option);

                chart && chart.on('axisAreaSelected', function (event) {
                    var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
                    console.log('北京: ', indices);
                });
            });

        </script>


    </body>
</html>