page contents

WEB前端教程:空气质量数据仪表盘

实现一个空气质量数据仪表盘,分别用不同的图表来展示不同城市的空气质量

attachments-2022-11-8KKr4iV36364c2677e1a6.png数据仪表盘

  阅读

HTML

CSS

JavaScript

  编码

实现一个空气质量数据仪表盘,分别用不同的图表来展示不同城市的空气质量,如下图

attachments-2022-11-Rcj6A9z46364c2b407c06.png

注意事项

  • 环形图和饼状图同时只出现一个,通过交互切换图表类型
  • 折线图及柱状图同时只出现一个,通过交互切换图表类型

参考数据(opens new window)

以上图仅作参考,大家可以随意按照自己的喜欢进行界面设计。

  互动数据仪表盘

  编码

任务一基础上实现一个可支持自定义的数据仪表盘,通过配置项的选择,甚至是拖拽等交互,生成仪表盘,并支持仪表盘中各个图表之间的数据联动,如下图

attachments-2022-11-OrOgJeLV6364c2cbebb04.jpg

参考数据(opens new window)

以上图仅作参考,大家可以随意按照自己的喜欢进行界面设计。

注意事项

  • 可以切换不同的仪表盘布局方式,如左右均分、上下均分,四分格等
  • 每个图表都包括:地域选择、图表类型选择、时间统计粒度选择、统计维度选择
  • 图表类型至少包括 3 种,可任选
  • 时间统计粒度至少包括 3 种,可任选
  • 统计维度选择至少包括 3 种,可任选
  • 可以使用任何组件、框架,如 jQuery、ECharts、D3.js 等


更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等

attachments-2022-11-pxwEh8nm6364c22f507cc.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1470 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章