1.数据处理
给定包含 10 个城市,连续 15 天的空气质量数据(包含 PM2.5、PM10、二氧化硫、二氧化氮、一氧化碳 5 项指标),对数据进行简单处理,如将数据整理成适合 ECharts 使用的格式,处理数据中的明显错误值 。
2.页面布局与样式
(1)使用 Bootstrap 框架搭建响应式页面,包含导航栏、内容区域和页脚。导航栏需包含 “城市对比”“趋势分析”“污染物分布” 菜单项;内容区域用于展示可视化图表;页脚显示作者信息和版权声明。
(2)运用 Bootstrap 的栅格系统、卡片组件进行页面布局,确保页面在手机、平板、电脑上显示布局合理。
3.数据可视化图表实现
(1)在 “城市对比” 页面,使用 ECharts 绘制柱状图,对比 10 个城市第 15 天的 PM2.5 数值,要求图表包含标题、坐标轴标签、图例,柱状图颜色区分明显,数据标签显示正确。
(2)在 “趋势分析” 页面,使用 ECharts 绘制折线图,展示 “上海” 城市 15 天内 PM10 的变化趋势,折线图要有提示框(鼠标悬停显示数据)、数据标记,线条样式美观。
(3)在 “污染物分布” 页面,使用 ECharts 绘制饼图,展示 10 个城市第 15 天二氧化氮的占比情况,饼图需有清晰的图例和数据标签。
4.交互功能实现
为导航栏菜单项添加点击事件,实现页面内容切换,点击图表元素时弹出提示框,显示对应数据信息。
5.代码规范与注释
(1)代码结构清晰,HTML、CSS、JavaScript 代码分离,遵循代码缩进和命名规范。数据:
[
{
"city": "北京",
"data": [
{ "date": "2025-06-01", "pm25": 50, "pm10": 80, "so2": 15 },
{ "date": "2025-06-02", "pm25": 55, "pm10": 85, "so2": 18 },
{ "date": "2025-06-03", "pm25": 58, "pm10": 90, "so2": 20 },
{ "date": "2025-06-04", "pm25": 60, "pm10": 92, "so2": 22 },
{ "date": "2025-06-05", "pm25": 56, "pm10": 88, "so2": 21 },
{ "date": "2025-06-06", "pm25": 52, "pm10": 84, "so2": 19 },
{ "date": "2025-06-07", "pm25": 53, "pm10": 86, "so2": 20 }
]
},
{
"city": "上海",
"data": [
{ "date": "2025-06-01", "pm25": 45, "pm10": 75, "so2": 12 },
{ "date": "2025-06-02", "pm25": 48, "pm10": 78, "so2": 14 },
{ "date": "2025-06-03", "pm25": 50, "pm10": 80, "so2": 15 },
{ "date": "2025-06-04", "pm25": 52, "pm10": 82, "so2": 16 },
{ "date": "2025-06-05", "pm25": 49, "pm10": 79, "so2": 15 },
{ "date": "2025-06-06", "pm25": 47, "pm10": 77, "so2": 14 },
{ "date": "2025-06-07", "pm25": 46, "pm10": 76, "so2": 13 }
]
},
{
"city": "广州",
"data": [
{ "date": "2025-06-01", "pm25": 42, "pm10": 70, "so2": 10 },
{ "date": "2025-06-02", "pm25": 44, "pm10": 72, "so2": 11 },
{ "date": "2025-06-03", "pm25": 46, "pm10": 74, "so2": 12 },
{ "date": "2025-06-04", "pm25": 48, "pm10": 76, "so2": 13 },
{ "date": "2025-06-05", "pm25": 45, "pm10": 73, "so2": 12 },
{ "date": "2025-06-06", "pm25": 43, "pm10": 71, "so2": 11 },
{ "date": "2025-06-07", "pm25": 44, "pm10": 72, "so2": 12 }
]
},
{
"city": "深圳",
"data": [
{ "date": "2025-06-01", "pm25": 40, "pm10": 68, "so2": 9 },
{ "date": "2025-06-02", "pm25": 42, "pm10": 70, "so2": 10 },
{ "date": "2025-06-03", "pm25": 44, "pm10": 72, "so2": 11 },
{ "date": "2025-06-04", "pm25": 46, "pm10": 74, "so2": 12 },
{ "date": "2025-06-05", "pm25": 43, "pm10": 71, "so2": 11 },
{ "date": "2025-06-06", "pm25": 41, "pm10": 69, "so2": 10 },
{ "date": "2025-06-07", "pm25": 42, "pm10": 70, "so2": 11 }
]
},
{
"city": "成都",
"data": [
{ "date": "2025-06-01", "pm25": 55, "pm10": 85, "so2": 18 },
{ "date": "2025-06-02", "pm25": 58, "pm10": 90, "so2": 20 },
{ "date": "2025-06-03", "pm25": 60, "pm10": 92, "so2": 22 },
{ "date": "2025-06-04", "pm25": 62, "pm10": 94, "so2": 23 },
{ "date": "2025-06-05", "pm25": 59, "pm10": 91, "so2": 22 },
{ "date": "2025-06-06", "pm25": 56, "pm10": 88, "so2": 20 },
{ "date": "2025-06-07", "pm25": 57, "pm10": 89, "so2": 21 }
]
},
{
"city": "杭州",
"data": [
{ "date": "2025-06-01", "pm25": 43, "pm10": 72, "so2": 11 },
{ "date": "2025-06-02", "pm25": 45, "pm10": 74, "so2": 12 },
{ "date": "2025-06-03", "pm25": 47, "pm10": 76, "so2": 13 },
{ "date": "2025-06-04", "pm25": 49, "pm10": 78, "so2": 14 },
{ "date": "2025-06-05", "pm25": 46, "pm10": 75, "so2": 13 },
{ "date": "2025-06-06", "pm25": 44, "pm10": 73, "so2": 12 },
{ "date": "2025-06-07", "pm25": 45, "pm10": 74, "so2": 13 }
]
},
{
"city": "南京",
"data": [
{ "date": "2025-06-01", "pm25": 48, "pm10": 78, "so2": 14 },
{ "date": "2025-06-02", "pm25": 50, "pm10": 80, "so2": 15 },
{ "date": "2025-06-03", "pm25": 52, "pm10": 82, "so2": 16 },
{ "date": "2025-06-04", "pm25": 54, "pm10": 84, "so2": 17 },
{ "date": "2025-06-05", "pm25": 51, "pm10": 81, "so2": 16 },
{ "date": "2025-06-06", "pm25": 49, "pm10": 79, "so2": 15 },
{ "date": "2025-06-07", "pm25": 50, "pm10": 80, "so2": 16 }
]
},
{
"city": "武汉",
"data": [
{ "date": "2025-06-01", "pm25": 52, "pm10": 82, "so2": 16 },
{ "date": "2025-06-02", "pm25": 54, "pm10": 84, "so2": 17 },
{ "date": "2025-06-03", "pm25": 56, "pm10": 86, "so2": 18 },
{ "date": "2025-06-04", "pm25": 58, "pm10": 88, "so2": 19 },
{ "date": "2025-06-05", "pm25": 55, "pm10": 85, "so2": 18 },
{ "date": "2025-06-06", "pm25": 53, "pm10": 83, "so2": 17 },
{ "date": "2025-06-07", "pm25": 54, "pm10": 84, "so2": 18 }
]
},
{
"city": "西安",
"data": [
{ "date": "2025-06-01", "pm25": 58, "pm10": 90, "so2": 20 },
{ "date": "2025-06-02", "pm25": 60, "pm10": 92, "so2": 22 },
{ "date": "2025-06-03", "pm25": 62, "pm10": 94, "so2": 23 },
{ "date": "2025-06-04", "pm25": 64, "pm10": 96, "so2": 24 },
{ "date": "2025-06-05", "pm25": 61, "pm10": 93, "so2": 23 },
{ "date": "2025-06-06", "pm25": 59, "pm10": 91, "so2": 22 },
{ "date": "2025-06-07", "pm25": 60, "pm10": 92, "so2": 23 }
]
},
{
"city": "重庆",
"data": [
{ "date": "2025-06-01", "pm25": 53, "pm10": 86, "so2": 19 },
{ "date": "2025-06-02", "pm25": 55, "pm10": 88, "so2": 20 },
{ "date": "2025-06-03", "pm25": 57, "pm10": 90, "so2": 21 },
{ "date": "2025-06-04", "pm25": 59, "pm10": 92, "so2": 22 },
{ "date": "2025-06-05", "pm25": 56, "pm10": 89, "so2": 21 },
{ "date": "2025-06-06", "pm25": 54, "pm10": 87, "so2": 20 },
{ "date": "2025-06-07", "pm25": 55, "pm10": 88, "so2": 21 }
]
}
]
最新发布