xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<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>