2
schangxiang@126.com
2024-08-16 b47c50a2a514def7374b32d7194b2c599cba5625
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
function option3 (name) {
    var count = 30;
    var key = name != 'pm25' ? name : 'pm2_5';
    var nameWorst = [];
    var dataWorst = data[name].slice(-count);
    for (var i = 0, l = dataWorst.length; i < l; i++) {
        nameWorst.push(dataWorst[i].name);
    }
    
    var nameBest = [];
    var dataBest = data[name].slice(0,count);
    dataBest.reverse();
    for (var i = 0, l = dataBest.length; i < l; i++) {
        dataBest[i] = {
            name: dataBest[i].name,
            value: - dataBest[i].value
        };
        nameBest.push(dataBest[i].name);
    }
    var option = {
        title : {
            text: '空气质量排行榜('+name+' 前后30名)',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            itemGap: 5,
            x:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        toolbox: {
            show : true,
            //orient : 'vertical',
            //x: 'right',
            //y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                //magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        dataRange: {
            orient: 'horizontal',
            precision: name != 'co' ? 0 : 2,
            min : data[name + 'Min'],
            max : data[name + 'Max'],
            text:['高','低'],           // 文本,默认为数值文本
            calculable : true,
            x: '45%',
            y: 640,
            itemWidth:35,
            color: ['maroon','purple','red','orange','yellow','lightgreen'],
            textStyle:{
                color:'#fff'
            }
        },
        grid:{
            x: 0,
            y: 50,
            x2: 0,
            y2: 0,
            borderWidth:0
        },
        xAxis : [
            {
                type : 'value',
                position: 'top',
                splitLine: {show:false},
                axisLine: {show:false},
                axisLabel : {show:false},
                min: 0,
                max: data[name+'Max']
            },
            {
                type : 'value',
                position: 'bottom',
                splitLine: {show:false},
                axisLine: {show:false},
                min: -data[name+'Max'],
                max: 0,
                axisLabel:{
                    show:false,
                    formatter: function (v){
                        return -v;
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'category',
                splitLine: {show:false},
                axisLine: {show:false},
                axisLabel : {show:false},
                data : nameWorst
            },
            {
                type : 'category',
                splitLine: {show:false},
                axisLine: {show:false},
                axisLabel : {show:false},
                data : nameBest
            }
        ],
        animation:false,
        series : [
            {
                name: '空气质量('+name+')',
                type: 'map',
                mapType: 'china',
                itemStyle:{normal:{label:{show:false}}},
                //roam: true,
                mapLocation: {
                    x: '45%',
                    y: 200,
                    width: '45%'
                },
                data:[
                    {name:'西藏', value:data.cityToData['拉萨'][key]},
                    {name:'青海', value:data.cityToData['西宁'][key]},
                    {name:'宁夏', value:data.cityToData['银川'][key]},
                    {name:'海南', value:data.cityToData['海口'][key]},
                    {name:'甘肃', value:data.cityToData['兰州'][key]},
                    {name:'贵州', value:data.cityToData['贵阳'][key]},
                    {name:'新疆', value:data.cityToData['乌鲁木齐'][key]},
                    {name:'云南', value:data.cityToData['昆明'][key]},
                    {name:'重庆', value:data.cityToData['重庆'][key]},
                    {name:'吉林', value:data.cityToData['长春'][key]},
                    {name:'山西', value:data.cityToData['太原'][key]},
                    {name:'天津', value:data.cityToData['天津'][key]},
                    {name:'江西', value:data.cityToData['南昌'][key]},
                    {name:'广西', value:data.cityToData['南宁'][key]},
                    {name:'陕西', value:data.cityToData['西安'][key]},
                    {name:'黑龙江', value:data.cityToData['哈尔滨'][key]},
                    {name:'内蒙古', value:data.cityToData['呼和浩特'][key]},
                    {name:'安徽', value:data.cityToData['合肥'][key]},
                    {name:'北京', value:(data.cityToData['北京'] || {})[key]},
                    {name:'福建', value:data.cityToData['福州'][key]},
                    {name:'上海', value:data.cityToData['上海'][key]},
                    {name:'湖北', value:data.cityToData['武汉'][key]},
                    {name:'湖南', value:data.cityToData['长沙'][key]},
                    {name:'四川', value:data.cityToData['成都'][key]},
                    {name:'辽宁', value:data.cityToData['沈阳'][key]},
                    {name:'河北', value:data.cityToData['石家庄'][key]},
                    {name:'河南', value:data.cityToData['郑州'][key]},
                    {name:'浙江', value:data.cityToData['杭州'][key]},
                    {name:'山东', value:data.cityToData['济南'][key]},
                    {name:'江苏', value:data.cityToData['南京'][key]},
                    {name:'广东', value:data.cityToData['广州'][key]}
                ]
            },
            {
                name: '空气质量最差('+name+')',
                type: 'bar',
                itemStyle : {
                    normal : {
                        color : (function (){
                            var zrColor = require('zrender/tool/color');
                            return zrColor.getLinearGradient(
                                0, 80, 0, 700,
                                //['orangered','yellow','lightskyblue']
                                [[0, 'purple'],[0.5, 'orangered'],[1, 'orange']]
                            )
                        })(),
                        label : {
                            show : true,
                            position: 'right',
                            formatter:'{b} : {c}'
                        }
                    }
                },
                data: dataWorst
            },
            {
                name: '空气质量最好('+name+')',
                type: 'bar',
                tooltip:{
                    trigger: 'item',
                    formatter : function (v) {
                        return v[0] + '<br/>' + v[1] + ' : ' + (-v[2]);
                    }
                },
                xAxisIndex:1,
                yAxisIndex:1,
                barMinHeight: 5,
                itemStyle : {
                    normal : {
                        color : (function (){
                            var zrColor = require('zrender/tool/color');
                            return zrColor.getLinearGradient(
                                0, 80, 0, 700,
                                //['orangered','yellow','lightskyblue']
                                [[0, 'lightskyblue'],[1, 'lightgreen']]
                            )
                        })(),
                        label : {
                            show : true,
                            position: 'left',
                            formatter: function (params) {
                                return params.name + ' : ' + (-params.value);
                            }
                        }
                    }
                },
                data: dataBest
            }
        ]
    };
    //console.log(option);
    return option;
}