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

Cc琎

2024-04-10 帮助1人

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

效果如图
学新通

实现流程

jquery请求天气api接口

echart渲染仪表盘数据, 并显示当前城市名称和空气质量数值

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

https://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('https://tianqiapi.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>

这篇好文章是转载于：学新通技术网

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

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

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

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

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐