使用echarts做一个空气质量指数仪表盘, 对接天气接口, 附源码

非常漂亮的空气质量仪表盘源码, 并且实现了空气质量数值和刻度正确匹配

效果如图
在这里插入图片描述

实现流程

jquery请求天气api接口
echart渲染仪表盘数据, 并显示当前城市名称和空气质量数值

点击网页链接可直接预览效果和另存下载链接：

http://tianqiapi.com/html/aqi_dashboard.html

附空气质量标准及健康指引

空气质量指数	污染级别	对健康的影响
0-50	优	空气质量令人满意，基本无空气污染，对健康没有危害
51-100	良	除少数对某些污染物特别敏感的人群外，不会对人体健康产生危害
101-150	轻度污染	敏感人群症状会有轻度加剧，对健康人群没有明显影响
151-200	中度污染	敏感人群症状进一步加剧，可能对健康人群的心脏、呼吸系统有影响
201-300	重度污染	空气状况很差，会对每个人的健康都产生比较严重的危害
>300	严重污染	空气状况极差，所有人的健康都会受到严重危害

源码如下：

<!--
	此示例需要注册天气api账号
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.get('http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=43656176&appsecret=I42og6Lm', function (tianqi) {
            console.log(tianqi);
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};
            var option;
            option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        center: ['50%', '75%'],
                        radius: '90%',
                        min: 0,
                        max: 300,
                        splitNumber: 12,
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [0.1666, '#9BCA7F'],
                                    [0.3332, '#F9DA65'],
                                    [0.4998, '#F29F39'],
                                    [0.6664, '#DB555E'],
                                    [0.8330, '#BA3779'],
                                    [1, '#F20000']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '12%',
                            width: 20,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 5
                            }
                        },
                        axisLabel: {
                            color: '#464646',
                            fontSize: 20,
                            distance: -60,
                            rotate: 'tangential',
                            formatter: function (value) {
                                console.log(value)
                                if (value === 275) {
                                    return '严重污染';
                                } else if (value === 225) {
                                    return '重度污染';
                                } else if (value === 175) {
                                    return '中度污染';
                                } else if (value === 125) {
                                    return '轻度污染';
                                } else if (value === 75) {
                                    return '良';
                                } else if (value === 25) {
                                    return '优';
                                }
                                return '';
                            }
                        },
                        title: {
                            offsetCenter: [0, '-10%'],
                            fontSize: 20
                        },
                        detail: {
                            fontSize: 50,
                            offsetCenter: [0, '-35%'],
                            valueAnimation: true,

                            color: 'auto'
                        },
                        data: [
                            {
                                value: tianqi.air,
                                name: tianqi.city + '空气质量指数（AQI）\n\nTianqiapi.com'
                            }
                        ]
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            window.addEventListener('resize', myChart.resize);
        })
    });

</script>
</body>
</html>
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

相关阅读:
uni-app - 弹出框
 C#窗体设计SaveFileDialog的用法
 漫谈：C语言 C++ 迷惑的语句、分号、大括号
 NAT技术
 【C++】特殊类的设计
 java 多态
 【IJCAI】CostFormer即插即用的MVS高效代价体聚合Transformer，FaceChain团队出品
 leetcode：207. 课程表
 8年经验面试官详解 Java 面试秘诀
 C - 指针与数组的区别
原文地址：https://blog.csdn.net/qq_38832501/article/details/128046065