百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

全国空气质量地图

困难

人数17人在学习该课程,有2人已经完成该课程

时间平均用时1.0

关键词Web数据可视化

课程概述

作业提交截止时间:04-24

任务描述

欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会

  • 利用ECharts和第三方API,实现以地图形式查看全国主要城市空气质量的功能
  • 效果可参考 Demo1 Demo2 ,要实现的主要功能点有:

    • 在地图中以不同颜色的圆点标注出各城市所在地位置,圆点的颜色代表该城市的空气质量等级,色值和空气质量等级的对应关系如下:

      | 空气质量等级 | AQI | 色值 |
      | 优 | 0 ~ 50 | #00E400 |
      | 良 | 51 ~ 100 | #FFFF00 |
      | 轻度污染 | 101 ~ 150 | #FF7E00 |
      | 中度污染 | 151 ~ 200 | #FF0000 |
      | 重度污染 | 201 ~ 300 | #99004C |
      | 严重污染 | 300+ | #7E0023 |

    • 地图的图例部分需要增加城市图标颜色与空气质量等级的对应关系说明

    • 当鼠标hover至城市所在圆点时,出现浮层,浮层中需显示城市名称、空气质量等级、AQI数值等内容,可参考下图:

      城市空气质量浮层

    • 当城市的空气质量等级达到严重污染时,用来标识城市的圆点需要增加向外扩散的雷达波效果,参考上面Demo1和Demo2中的示例

    • 其他可以增强界面交互和丰富应用功能的点,请尽情发挥!

任务注意事项

  • 上面描述中的Demo仅作为需求描述参考,不作为实现的设计参考
  • 请注意代码风格的整齐、优雅
  • 代码中需含有必要的注释
  • 可以合理使用第三方框架、类库,图表库建议使用 ECharts, 第三方空气质量数据建议采用 PM25.in
  • 所有数据均要求真实,可能需要创造一个服务端的环境及代码
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~