ZZ052-大数据应用与服务赛项赛题第05套 echarts 可视化-CSDN博客

本文链接：https://blog.csdn.net/m0_74972192/article/details/140770563

四、模块三：业务分析与可视化

（一）任务一：数据可视化

子任务一：基于 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);