四、模块三:业务分析与可视化
(一)任务一:数据可视化
- 子任务一:基于 Echarts 的数据可视化分析
气候变化正在迅速地改变地球。随着全球气温不断升高、 海平面上升、极端天气事件频繁发生,人们对于地球的未来更加担忧。为了更好地了解气候变化的趋势、预测未来天气趋势,我们创建了“天气数据库”,用于收集、记录、可视化展示来自全球各地的气象数据和天气预报信息。请在“index.html”文件中编写代码实现功能,数据文件名为
“chengdu.js”:
- 文件内记录了四川省成都市 2021 年的天气数据,
其中天气类型一共有多云、霾、晴、小雨等 11 种,统计每种天气类型的出现次数,将统计得到的数据格式转换为Echarts 所需的数据格式;
说明
- 数据统计:我们首先遍历了天气数据,统计每种天气类型的出现次数,并将结果存储在
weatherCount
对象中。 - 数据转换:接着,我们将统计结果转换为 ECharts 所需的数据格式,生成
legendData
和seriesData
。 - 图表配置:然后,我们使用 ECharts 配置项设置图表,包括标题、提示框、图例和系列数据。
- 图表渲染:最后,我们使用
setOption
方法将配置项应用到图表实例中,完成图表的渲染。
步骤:
步骤1:统计每种天气类型的出现次数
var weatherCount = {};
chengduData.forEach(function (data) {
var weatherType = data.weather;
if (weatherCount[weatherType]) {
weatherCount[weatherType]++;
} else {
weatherCount[weatherType] = 1;
}
});
这段代码遍历 chengduData
数组,并统计每种天气类型的出现次数。结果存储在 weatherCount
对象中。
步骤2:转换为 ECharts 所需的数据格式
var legendData = Object.keys(weatherCount);
var seriesData = Object.entries(weatherCount).map(([name, value]) => ({
name: name,
value: value,
}));
这段代码将 weatherCount
对象转换为 ECharts 所需的数据格式。legendData
是一个包含所有天气类型的数组,seriesData
是一个包含每种天气类型及其出现次数的数组。
完整代码:
// 步骤1:统计每种天气类型的出现次数
var weatherCount = {};
chengduData.forEach(function (data) {
var weatherType = data.weather;
if (weatherCount[weatherType]) {
weatherCount[weatherType]++;
} else {
weatherCount[weatherType] = 1;
}
});
// 步骤2:转换为 ECharts 所需的数据格式
var legendData = Object.keys(weatherCount);
var seriesData = Object.entries(weatherCount).map(([name, value]) => ({
name: name,
value: value,
}));
// 输出转换后的数据格式
console.log({
legendData: legendData,
seriesData: seriesData,
});
- 将第 1 步中构建的数据作为输入,通过 Echarts
绘制饼图;
ECharts 配置
var myChart = echarts.init(document.getElementById('weatherPieChart'));
var echartsData = {
legendData: [ '多云','阴','晴','霾','小雨', '小雨到大雨','小雨到中雨','小雨转阴','阴到小雨', '小雨到中雨','中雨到暴雨','小雨转多云'],
seriesData: [
{name: '多云', value: 129},
{name: '阴', value: 137},
{name: '晴', value: 42},
{name: '霾', value: 3},
{name: '小雨', value: 24},
{name: '阴到小雨', value: 4},
{name: '小雨到中雨', value: 8},
{name: '小雨转阴', value: 11},
{name: '小雨到大雨', value: 4},
{name: '中雨到暴雨', value: 1},
{name: '小雨转多云', value: 2}
]
};
var option = {
title: {
text: '四川省成都市2021年天气类型统计'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: echartsData.legendData
},
series: [
{
name: '天气类型统计',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: echartsData.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
这段代码使用 ECharts 配置项设置图表,并将统计数据展示为饼图。
使用浏览器打开“index.html”文件,然后将渲 染结果截图粘贴到答题报告对应位置
完整代码
var weatherCount = {};
chengduData.forEach(function (data) {
var weatherType = data.weather;
if (weatherCount[weatherType]) {
weatherCount[weatherType]++;
} else {
weatherCount[weatherType] = 1;
}
});
var legendData = Object.keys(weatherCount);
var seriesData = Object.entries(weatherCount).map(([name, value]) => ({
name: name,
value: value,
}));
var myChart = echarts.init(document.getElementById('weatherPieChart'));
var echartsData = {
legendData: legendData,
seriesData: seriesData
};
var option = {
title: {
text: '四川省成都市2021年天气类型统计'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: echartsData.legendData
},
series: [
{
name: '天气类型统计',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: echartsData.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
扩展
1. 添加更多数据分析
除了统计每种天气类型的出现次数,我们还可以分析其他天气相关的数据,例如:
- 温度分析:统计每个月的平均温度、最高温度和最低温度。
- 降水量分析:统计每个月的总降水量和平均降水量。
- 风速分析:统计每个月的平均风速和最大风速。
2. 多种图表展示
除了饼图,我们还可以使用其他类型的图表来展示数据,例如:
- 柱状图:展示每个月的平均温度或降水量。
- 折线图:展示温度或降水量的变化趋势。
- 雷达图:展示不同天气类型的分布情况。
3. 交互功能
增加一些交互功能,使图表更加动态和用户友好,例如:
- 数据筛选:允许用户选择特定的时间范围或天气类型进行分析。
- 动态更新:实时更新图表数据,展示最新的天气情况。
- 工具提示:在鼠标悬停时显示详细的数据信息。
4. 数据预测
使用机器学习算法对未来的天气情况进行预测,例如:
- 温度预测:预测未来几天或几个月的温度变化。
- 降水量预测:预测未来的降水量和降水概率。
5. 数据导出
允许用户将分析结果导出为不同格式的文件,例如:
- CSV 文件:导出原始数据和分析结果。
- 图片文件:导出图表为图片格式,便于分享和打印。
相关类型推荐
- ECharts 官方文档
- ECharts 实例教程其他文章推荐
其他文章推荐
- Python 创建一个简单的在线聊天系统-CSDN博客
- 使用Python 和SQLite 数据库创建个人记账应用-CSDN博客
- 使用Python 进行文本情感分析-CSDN博客
- 使用Python和Selenium爬取QQ新闻热榜-CSDN博客
- python 数据结构与算法-CSDN博客
结论
通过以上步骤,你可以将成都市2021年的天气数据可视化为饼图,直观展示每种天气类型的出现频率。
总结
通过以上步骤,我们成功地将成都市2021年的天气数据可视化为饼图。这个饼图直观地展示了每种天气类型的出现频率,帮助我们更好地理解这一年的天气分布情况,欢迎在评论区留言。继续探索和学习,祝你在深度学习的旅程中取得更多的成果!🚀
希望这个结论对你有所帮助!如果你有任何其他问题或需要进一步的帮助,请随时告诉我。😊