本文档介绍了如何利用ECharts、Ajax和其他前端技术实现一个天气预报系统。系统包括当前天气、七日预报等多个模块，通过jQuery城市选择器插件获取城市数据，使用Ajax从腾讯服务器获取天气数据并进行可视化展示。
天气预报在日常生活、农业生产、航空和军事等方面非常重要，准确及时的天气预报可以让经济建设、国防建设趋利避害，在保障人民生命财产安全等方面有极大的社会和经济效益。
11.3.1 案例呈现
本章将综合运用ECMAScript、BOM、DOM、Ajax和Echarts等知识，实现如图11-8所示的基于ECharts的天气预报系统。
图11-8 天气预报系统界面
11.3.2 案例分析
天气预报系统分为如下模块：当前天气、七日天气预报折线图、逐小时预报折线图、七日最高温最低温柱状图、湿度水球图、气压仪表盘、空气质量指数雷达图、极端天气预警、数据更新时间、实时提示语。第10章已经介绍过天气预报数据如何通过Ajax技术从腾讯服务器获取，本章的主要工作是处理数据，通过ECharts的折线图、柱状图、水球图、仪表盘、雷达图等将数据可视化。
开始编写JavaScript代码前，首先创建3个文件夹分别存放js文件、CSS文件和图片文件；然后新建index.html文件和index.js文件。在网页文件index.html中引入所有的js文件，包括echarts.min.js、echarts-liquidfill.js、jquery-1.10.2.min.js、streets-data.min.js、cityPicker-2.0.5.js和index.js。
其中，streets-data.min.js和cityPicker-2.0.5.js是jQuery城市选择器插件。
示例代码如下：
1 <body>
2 //此处省略其它html代码
3 <script src="js/echarts.min.js"></script>
4 <script src="js/echarts-liquidfill.js"></script>
5 <script src="js/jquery-1.10.2.min.js"></script>
6 <script src="js/streets-data.min.js"></script>
最低0.47元/天 解锁文章
扫一扫
1371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
