Start again

2026-03-18 00:12:01 +01:00 · 2020-10-04 17:14:00 +02:00
parent c0d3912413
commit 091f119048
4382 changed files with 1762543 additions and 9606 deletions
--- a/vendors/echarts/test/parallel-aqi.html
+++ b/vendors/echarts/test/parallel-aqi.html
@@ -0,0 +1,181 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="./esl.js"></script>
+        <script src="./config.js"></script>
+        <link rel="stylesheet" href="./reset.css">
+    </head>
+    <body>
+        <style>
+            body {
+                /*background: #000;*/
+            }
+        </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)'},
+                {name: '等级', index: 7, text: '等级'}
+            ];
+
+            require([
+                'data/aqi/BJdata',
+                'data/aqi/GZdata',
+                'data/aqi/SHdata',
+                'zrender/core/util',
+                'echarts',
+                'echarts/chart/parallel',
+                'echarts/component/legend',
+                'echarts/component/visualMap',
+                'echarts/component/parallel',
+            ], function (dataBJ, dataGZ, dataSH, zrUtil, echarts) {
+
+                var chart = echarts.init(document.getElementById('main'));
+
+                var lineStyle = {
+                    normal: {
+                        width: 1
+                        // opacity: 0.5,
+                        // shadowBlur: 10,
+                        // shadowOffsetX: 0,
+                        // shadowOffsetY: 0,
+                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                };
+
+                chart.setOption({
+                    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,
+                        dimension: 2,
+                        inRange: {
+                            color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
+                            // colorAlpha: [0, 1]
+                        }
+                    },
+                    // dataZoom: {
+                    //     show: true,
+                    //     orient: 'vertical',
+                    //     parallelAxisIndex: [0]
+                    // },
+                    parallelAxis: [
+                        {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
+                        {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,
+                            nameTextStyle: {
+                                // color: '#fff',
+                                fontSize: 14
+                            },
+                            axisLine: {
+                                lineStyle: {
+                                    // color: '#aaa'
+                                }
+                            },
+                            axisTick: {
+                                lineStyle: {
+                                    // color: '#777'
+                                }
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                textStyle: {
+                                    // color: '#fff'
+                                }
+                            }
+                        }
+                    },
+                    series: [
+                        {
+                            name: '北京',
+                            type: 'parallel',
+                            lineStyle: lineStyle,
+                            data: dataBJ
+                            // data: [
+                            //     [ 1, 32,12 , 19, 28,1.39,24, 8,"优"],
+                            // ]
+                        },
+                        {
+                            name: '上海',
+                            type: 'parallel',
+                            lineStyle: lineStyle,
+                            data: dataSH
+                            // data: [
+                            //     [ 1, 332,212 , 119, 128,12.39,124, 18,"良"],
+                            // ]
+                        },
+                        {
+                            name: '广州',
+                            type: 'parallel',
+                            lineStyle: lineStyle,
+                            data: dataGZ
+                        }
+                    ]
+                });
+
+
+                chart.on('axisAreaSelected', function (event) {
+
+                    var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
+                    console.log('北京: ', indices);
+
+                });
+            });
+
+        </script>
+    </body>
+</html>