# 空气污染指标分析

**Repository Path**: worth-1/whl

## Basic Information

- **Project Name**: 空气污染指标分析
- **Description**: 本项目涵盖数据采集、数据抽取与转换、数据处理、数据分析、数据存储、数据可视化。项目在Kaggle等网站获取数据，将数据上传到HDFS中，使用Scala代码编写数据清洗和分析项目，使用spark进行数据分析，使用SpringBoot+Mybatis进项数据接口项目的快速开发，并构建数据传输对象，便于Mysql中读取据可视化。使用vue框架+echarts进行前端可视化，以图形形式展现数据。

- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-03-10
- **Last Updated**: 2025-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 空气污染指标分析
   ![输入图片说明](./img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-12-30%20195558.png)

#### 介绍
**简介**
本项目由大数据第6班第8小组共同完成 

#### 数据来源
https://www.kaggle.com/datasets/hanwizardhanwizard/polling     中国空气质量数据

https://www.kaggle.com/datasets/mujtabamatin/air-quality-and-pollution-assessment      空气质量和污染评估


#### 数据集

|  Temperature | Humidity  |  PM2.5 | PM10  | NO2  | SO2  |  CO | Proximity_to_Industrial_Areas  |  Population_Density | Air_Quality  |
|---|---|---|---|---|---|---|---|---|---|
| 10~60  |  30~110 |  0~~250 | -1~300  | 0~60  |  -10~50 | 0~4  | 0~20  |  100~1000 | Good，Moderate，Poor，Hazardous  |


|  月份 |  AQI | 范围  | 质量等级  | PM2.5  | PM10  | CO   |  SO2 |  NO2 | O3  |
|---|---|---|---|---|---|---|---|---|---|
| 1~12月  |   |   |   |   |   |   |   |   |   |

  PM2.5是指空气中直径小于或等于2.5微米的颗粒物（particulate matter），这些颗粒物也被称为细颗粒物。PM2.5的直径大约是人类头发丝直径的1/20。由于它们非常细小，可以长时间悬浮在空气中，并且能够深入肺部，因此对人体健康和环境质量有显著影响。

PM2.5的主要来源包括：

燃烧过程：如工业生产、汽车尾气、燃煤发电厂等。
自然来源：如沙尘暴、火山爆发、森林火灾等。
地面扬尘：如建筑工地、道路扬尘等。
PM2.5因其微小的尺寸，可以携带有毒物质，如重金属、化学物质和细菌，对人体健康构成威胁，包括但不限于呼吸系统疾病、心血管疾病等。因此，许多国家和地区都将PM2.5的监测和控制作为环境保护和公共卫生的重要部分


#### 上传原始数据到HDFS

```
hdfs dfs -mkdir -p /pollution-data/ods
hdfs dfs -put pollution_dataset.csv /pollution-data/ods
```


#### 创建 hive 数据库

create database wanghaolin

#### 创建 mysql 数据库

create database wanghaolin

#### 工程文件

1.数据分析 pollution-spark

2.数据接口 pollution-api

3.数据可视化 pollution-view



#### 数据分析

####  POM.XML


```
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.whl</groupId>
    <artifactId>pollution-analysis</artifactId>
    <version>1.0.0</version>

    <properties>
        <jdk.version>8</jdk.version>
        <!-- 公共配置 -->
        <maven.compiler.source>${jdk.version}</maven.compiler.source>
        <maven.compiler.target>${jdk.version}</maven.compiler.target>
        <maven.compiler.compilerVersion>${jdk.version}</maven.compiler.compilerVersion>
        <maven.compiler.encoding>utf-8</maven.compiler.encoding>
        <project.build.sourceEncoding>utf-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <maven.test.failure.ignore>true</maven.test.failure.ignore>
        <maven.test.skip>true</maven.test.skip>
        <spark.version>3.5.3</spark.version>

        <commons-dbutils.version>1.8.1</commons-dbutils.version>
        <commons-io.version>2.18.0</commons-io.version>
        <commons-lang3.version>3.17.0</commons-lang3.version>
        <druid.version>1.2.24</druid.version>
        <fastjson.version>2.0.53</fastjson.version>
        <fastjson2.version>2.0.53</fastjson2.version>
        <gson.version>2.11.0</gson.version>
        <hadoop.version>3.4.0</hadoop.version>
        <hive.version>4.0.1</hive.version>
        <java-testdata-generator.version>1.1.2</java-testdata-generator.version>
        <jackson.version>2.15.4</jackson.version>
        <hutool.version>5.8.34</hutool.version>
        <lombok.version>1.18.34</lombok.version>
        <mysql.version>9.1.0</mysql.version>
        <scala.version>2.13.15</scala.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.scala-lang</groupId>
            <artifactId>scala-library</artifactId>
            <version>${scala.version}</version>
        </dependency>
        <dependency>
            <groupId>org.scala-lang</groupId>
            <artifactId>scala-compiler</artifactId>
            <version>${scala.version}</version>
        </dependency>
        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>java-testdata-generator</artifactId>
            <version>${java-testdata-generator.version}</version>
        </dependency>
        <!-- spark-core -->
        <dependency>
            <groupId>org.apache.spark</groupId>
            <artifactId>spark-core_2.13</artifactId>
            <version>${spark.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.spark</groupId>
            <artifactId>spark-sql_2.13</artifactId>
            <version>${spark.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.spark</groupId>
            <artifactId>spark-streaming_2.13</artifactId>
            <version>${spark.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.spark</groupId>
            <artifactId>spark-hive_2.13</artifactId>
            <version>${spark.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.spark</groupId>
            <artifactId>spark-streaming-kafka-0-10_2.13</artifactId>
            <version>${spark.version}</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>${lombok.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-slf4j2-impl</artifactId>
            <version>2.24.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>2.24.2</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <!--<version>1.7.36</version>-->
            <version>2.0.16</version>
        </dependency>
        <dependency>
            <groupId>org.apache.hadoop</groupId>
            <artifactId>hadoop-client</artifactId>
            <version>${hadoop.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.hive</groupId>
            <artifactId>hive-jdbc</artifactId>
            <version>${hive.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>${commons-lang3.version}</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>${commons-io.version}</version>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>${jackson.version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>${jackson.version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson.version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.datatype</groupId>
            <artifactId>jackson-datatype-jsr310</artifactId>
            <version>${jackson.version}</version>
        </dependency>
    </dependencies>
    <build>
        <finalName>${project.artifactId}</finalName>
        <!--<outputDirectory>../package</outputDirectory>-->
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.13.0</version>
                <configuration>
                    <!-- 设置编译字符编码 -->
                    <encoding>UTF-8</encoding>
                    <!-- 设置编译jdk版本 -->
                    <source>${jdk.version}</source>
                    <target>${jdk.version}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-clean-plugin</artifactId>
                <version>3.4.0</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.3.1</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.4.0</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <version>3.4.2</version>
            </plugin>
            <!-- 编译级别 -->
            <!-- 打包的时候跳过测试junit begin -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>3.5.2</version>
                <configuration>
                    <skip>true</skip>
                </configuration>
            </plugin>
            <!-- 该插件用于将Scala代码编译成class文件 -->


            <plugin>
                <groupId>net.alchim31.maven</groupId>
                <artifactId>scala-maven-plugin</artifactId>
                <version>4.9.2</version>
                <configuration>
                    <scalaCompatVersion>${scala.version}</scalaCompatVersion>
                    <scalaVersion>${scala.version}</scalaVersion>
                </configuration>
                <executions>
                    <execution>
                        <id>scala-compile-first</id>
                        <phase>process-resources</phase>
                        <!--<phase>process-resources</phase>
                        <phase>compile</phase>  改为 compile -->
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                    <execution>
                        <goals>
                            <goal>testCompile</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>compile-scala</id>
                        <phase>compile</phase>
                        <goals>
                            <goal>add-source</goal>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>test-compile-scala</id>
                        <phase>test-compile</phase>
                        <goals>
                            <goal>add-source</goal>
                            <goal>testCompile</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-assembly-plugin</artifactId>
                <version>3.7.1</version>
                <configuration>
                    <descriptorRefs>
                        <descriptorRef>jar-with-dependencies</descriptorRef>
                    </descriptorRefs>
                </configuration>
                <executions>
                    <execution>
                        <id>make-assembly</id>
                        <phase>package</phase>
                        <goals>
                            <goal>single</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
    <repositories>
        <repository>
            <id>public</id>
            <name>aliyun nexus</name>
            <url>https://maven.aliyun.com/repository/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>public</id>
            <name>aliyun nexus</name>
            <url>https://maven.aliyun.com/repository/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>
</project>

```

#### 集群配置文件

下载集群配置文件到 resources 目录下保存

#### hdfs配置文件

core-site.xml

hdfs-site.xml

#### hive配置文件

hive-stie.xml 

#### log4j.properties


```
log4j.rootLogger=error, stdout,R
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss,SSS}  %5p --- [%50t]  %-80c(line:%5L)  :  %m%n

log4j.appender.R=org.apache.log4j.RollingFileAppender
log4j.appender.R.File=../log/agent.log
log4j.appender.R.MaxFileSize=1024KB
log4j.appender.R.MaxBackupIndex=1

log4j.appender.R.layout=org.apache.log4j.PatternLayout
log4j.appender.R.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss,SSS}  %5p --- [%50t]  %-80c(line:%6L)  :  %m%n
```


#### spark工具类

hive.properties

```
warehouse.dir=hdfs://lihaozhe01:8020/user/hive/warehouse
metastore.uris=thrift://lihaozhe01:9083
```



mysql.properties

```
url=jdbc:mysql://lihaozhe01
schema=wanghaolin
user=root
password=Lihaozhe!!@@1122
```


###org.whl.util.spark.SparkUtil


```
package org.whl.util.spark

import org.apache.spark.SparkConf
import org.apache.spark.sql.SparkSession

import java.util.Properties

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 17:55
 */
object SparkUtil {
  def apply(): SparkSession = {//这里定义了一个 apply 方法，它返回一个 SparkSession 实例。当我们调用 SparkUtil() 时，实际上会执行这个方法
    System.setProperty("HADOOP_USER_NAME", "root")//这行代码设置了Hadoop的用户名称为“root”。这意味着后续的Hadoop作业将以“root”用户的身份执行
    // System.setProperty("HADOOP_USER_NAME", "lhz")
    val sparkConf = new SparkConf()//创建一个新的 SparkConf 对象。SparkConf 是用于配置Spark应用程序的类
    if (!sparkConf.contains("spark.master")) {
      sparkConf.setMaster("local")//设置Spark的运行模式为“local”，意味着作业将仅在本地运行，而不是在集群上
    }
    val prop = new Properties()//创建一个新的 Properties 对象，用于读取配置属性
    prop.load(this.getClass.getClassLoader.getResourceAsStream("hive.properties"))
    val sparkSession: SparkSession = SparkSession
      .builder()//调用 SparkSession 的构建器方法，开始构建 SparkSession 实例
      .appName("Spark SQL JDBC")//设置Spark应用程序的名称为 "Spark SQL JDBC"
      .config(conf = sparkConf)//将之前创建的 sparkConf 配置传递给 SparkSession 的构建器
      //      .config("spark.sql.warehouse.dir", prop.getProperty("warehouse.dir"))
      //      .config("hive.metastore.uris", prop.getProperty("metastore.uris"))
      .enableHiveSupport()//启用 Hive 支持，使 SparkSession 可以访问 Hive Metastore
      .getOrCreate()//获取现有的 SparkSession 实例，如果不存在则创建一个新的实例
    sparkSession//返回 SparkSession 实例
  }

  /**
   * 获取 mysql 连接参数
   *
   * @param tableName 数据表名称 默认数据库名称为 lihaozhe
   * @return
   */
  def mysqlConnectionProperties(tableName: String): Properties = {
    val prop = new Properties()
    prop.load(this.getClass.getClassLoader.getResourceAsStream("mysql.properties"))
    val schema = prop.remove("schema")
    prop.put("tableName", schema + "." + tableName)
    prop
  }

  /**
   * 获取 mysql 连接参数
   *
   * @param schema    数据库名称
   * @param tableName 数据表名称
   * @return
   */
  def mysqlConnectionProperties(schema: String, tableName: String): Properties = {
    val prop = new Properties()
    prop.load(this.getClass.getClassLoader.getResourceAsStream("mysql.properties"))
    prop.remove("schema")
    prop.put("tableName", schema + "." + tableName)
    prop
  }

  /**
   * 百分比转换
   *
   * @param number 浮点数
   * @return 百分比
   */
  def rate(number: Double): Double = {
    BigDecimal(number).setScale(4, BigDecimal.RoundingMode.HALF_UP).toDouble * 100
  }
}

```



###数据清洗
org.whl.pollution.etl.PollutionEtl


```
package org.whl.pollution.etl

import org.apache.spark.sql.SaveMode
import org.apache.spark.sql.functions.col
import org.apache.spark.sql.types.{DoubleType, StringType}
import org.whl.util.spark.SparkUtil

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 17:58
 */
object PollutionEtl {
  def main(args: Array[String]): Unit = {
    // 获取 SparkSession 对象
    val sparkSession = SparkUtil()

    // 定义源数据在HDFS文件系统的路径
    val originPath: String = "/pollution-data/ods/pollution_dataset.csv"
    // 读取 csv 文件 获取 dataFrame
    val df = sparkSession.read.option("header", "true").csv(originPath)

    // 字段集合
    val cols = Array("Temperature","Humidity","PM25","PM10","NO2","SO2","CO","Proximity_to_Industrial_Areas","Population_Density","Air_Quality")

    // 过滤掉有空值的数据行
    df.na.drop(cols)

    // 为字段指定数据类型
    val table = df.select(
      col("Temperature") cast (DoubleType),
      col("Humidity") cast (DoubleType),
      col("PM25") cast (DoubleType),
      col("PM10") cast (DoubleType),
      col("NO2") cast (DoubleType),
      col("SO2") cast (DoubleType),
      col("CO") cast (DoubleType),
      col("Proximity_to_Industrial_Areas") cast (DoubleType),
      col("Population_Density") cast (DoubleType),
      col("Air_Quality") cast (StringType),
    )
    // 保存数据到 hive
    table.write.mode(SaveMode.Overwrite).saveAsTable("wanghaolin.whl_pollution")
    // 释放资源
    sparkSession.stop()
  }
}
```



#### hive 建表

 _该步骤可以省略_ 






#### 数据接口

## 使用SpringBoot创建工程

springboot工程

pom.xml


```
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>org.whl</groupId>
    <artifactId>air-api</artifactId>
    <version>0.0.1</version>
    <name>air-api</name>
    <description>air-api</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>21</java.version>
        <jdk.version>21</jdk.version>
        <maven.compiler.source>${jdk.version}</maven.compiler.source>
        <maven.compiler.target>${jdk.version}</maven.compiler.target>
        <maven.compiler.compilerVersion>${jdk.version}</maven.compiler.compilerVersion>
        <maven.compiler.encoding>utf-8</maven.compiler.encoding>
        <project.build.sourceEncoding>utf-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <maven.test.failure.ignore>true</maven.test.failure.ignore>
        <maven.test.skip>true</maven.test.skip>
        <commons-io.version>2.17.0</commons-io.version>
        <commons-lang3.version>3.17.0</commons-lang3.version>
        <druid.version>1.2.23</druid.version>
        <dom4j.version>2.1.4</dom4j.version>
        <fastjson.version>2.0.53</fastjson.version>
        <fastjson2.version>2.0.53</fastjson2.version>
        <gson.version>2.11.0</gson.version>
        <generator.version>1.1.2</generator.version>
        <hutool.version>5.8.32</hutool.version>
        <junit5.version>5.11.2</junit5.version>
        <jaxen.version>2.0.0</jaxen.version>
        <jackson.version>2.18.0</jackson.version>
        <layui.version>2.9.18</layui.version>
        <lombok.version>1.18.34</lombok.version>
        <mybatis-plus.version>3.5.9</mybatis-plus.version>
        <mybatis-spring.version>3.0.4</mybatis-spring.version>
        <mysql.version>9.1.0</mysql.version>
        <spring-boot.version>3.4.0</spring-boot.version>
        <presto.version>0.289</presto.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-spring-boot3-starter</artifactId>
            <version>${mybatis-plus.version}</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-jsqlparser</artifactId>
            <version>${mybatis-plus.version}</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>${mybatis-plus.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>${hutool.version}</version>
        </dependency>
        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>java-testdata-generator</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>${commons-lang3.version}</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>${commons-io.version}</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>${gson.version}</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>layui</artifactId>
            <version>${layui.version}</version>
        </dependency>
        <!--com.alibaba.druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>${druid.version}</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!--openapi3-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId>
            <version>4.5.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.13.0</version>
                <configuration>
                    <encoding>UTF-8</encoding>
                    <source>${jdk.version}</source>
                    <target>${jdk.version}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
        <finalName>${project.name}</finalName>
    </build>
    <repositories>
        <repository>
            <id>public</id>
            <name>aliyun nexus</name>
            <url>https://maven.aliyun.com/repository/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>public</id>
            <name>aliyun nexus</name>
            <url>https://maven.aliyun.com/repository/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>
</project>

```


#### 导入工具类

导入 util 包

![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-02%20085124.png)


#### 导入配置类

导入 config 包

![输入图片说明](%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-01-02%20085155.png)


##1.全局异常处理

```
package org.whl.airapi.config;

import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import org.whl.airapi.util.response.ResponseResult;
import org.whl.airapi.util.response.ResultCode;
/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 22:20
 */
@ControllerAdvice
@RestControllerAdvice
public class GlobalException {
    @ExceptionHandler(Exception.class)
    public ResponseResult<String> defaultErrorHandler(Exception e) {
        return new ResponseResult<>(ResultCode.EXCEPTION.getCode(), e.getMessage());
    }
}

```


##2.Mybatis Plus 分页方言


```
package org.whl.airapi.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 22:22
 */
@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        // 于 v3.5.9 起，PaginationInnerInterceptor 已分离出来。如需使用，则需单独引入 mybatis-plus-jsqlparser 依赖
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }

}

```


##3.openApi 配置


```
package org.whl.airapi.config;

import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Contact;
import io.swagger.v3.oas.models.info.Info;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.web.context.WebServerInitializedEvent;
import org.springframework.context.ApplicationListener;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.net.Inet4Address;
import java.net.UnknownHostException;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 22:23
 */
@Configuration
@Slf4j
public class OpenApiConfig  implements ApplicationListener<WebServerInitializedEvent> {
    @Bean
    public OpenAPI springOpenAPI() {
        Contact contact = new Contact();
        contact.setName("王浩霖");
        contact.setUrl("https://space.bilibili.com/480308139");
        contact.setEmail("whl321197@qq.com");
        // 访问路径：http://localhost:8080/swagger-ui/index.html
        // 访问路径：http://localhost:8080/doc.html
        return new OpenAPI().info(new Info()
                .title("SpringBoot API")
                .description("SpringBoot Simple Application")
                .contact(contact)
                .version("1.0.0"));
    }

    @Override
    public void onApplicationEvent(WebServerInitializedEvent event) {
        try {
            //获取IP
            String hostAddress = Inet4Address.getLocalHost().getHostAddress();
            //获取端口号
            int port = event.getWebServer().getPort();
            //获取应用名
            String applicationName = event.getApplicationContext().getApplicationName();
            // TODO:这个localhost改成host地址
            log.info("项目启动启动成功！接口文档地址: http://" + hostAddress + ":" + port + applicationName + "/doc.html");
        } catch (UnknownHostException e) {
            e.printStackTrace();
        }
    }
}

```


#### 图表VO类
 **org.whl.airapi.vo.Chart** 


```
package org.whl.airapi.vo;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import org.whl.airapi.util.annotation.RowKeyAnnotation;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/18 17:23
 */
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class Chart {
    @RowKeyAnnotation
    private String name;
    private Object value;
}

```


#### application.yml


```
server:
  port: 8080
  servlet:
    context-path: /api
spring:
  application:
    name: air-api
  jackson:
    serialization:
      FAIL_ON_EMPTY_BEANS: false
    # json 序列化排除值为 null 的属性
    default-property-inclusion: non_null
    # 配置 Date 类的时间格式，如果不涉及可以不加
    date-format: yyyy-MM-dd HH:mm:ss
    # 配置 Date 类的时区，如果不涉及可以不加
    time-zone: GMT+8
  thymeleaf:
    #缓冲的配置
    cache: false
    check-template: true
    check-template-location: true
    #开启MVC thymeleaf 视图解析
    enabled: true
    #模板的模式，支持 HTML, XML TEXT JAVASCRIPT
    mode: HTML
    #编码 可不用配置
    encoding: UTF-8
    #配置模板路径，默认是templates，可以不用配置
    prefix: classpath:templates
    # 文件后缀名
    suffix: .html
    #内容类别,可不用配置
    servlet:
      content-type: text/html;charset=utf-8
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/wanghaolin?allowPublicKeyRetrieval=true&sslMode=DISABLED&useUnicode=true&characterEncoding=UTF8&useSSL=false&useServerPrepStmts=false&rewriteBatchedStatements=true&cachePrepStmts=true&allowMultiQueries=true&serverTimeZone=Aisa/Shanghai
    username: root
    password: 123456
mybatis-plus:
  # 如果是放在src/main/java目录下 classpath:/com/lihaozhe/*/mapper/*Mapper.xml
  # 如果是放在resource目录 classpath:/mapper/*Mapper.xml
  mapper-locations: classpath:mapper/*.xml
  #实体扫描，多个package用逗号或者分号分隔
  type-aliases-package: org.whl.airapi.dto,org.whl.airapi.vo
  configuration:
    #配置返回数据库(column下划线命名&&返回java实体是驼峰命名)，自动匹配无需as（没开启这个，SQL需要写as： select user_id as userId）
    map-underscore-to-camel-case: true
    cache-enabled: false
    #配置JdbcTypeForNull, oracle数据库必须配置
    jdbc-type-for-null: 'null'
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
#是否激活 swagger true or false
springdoc:
  swagger-ui:
    path: /swagger-ui
    tags-sorter: alpha
    operations-sorter: alpha
  api-docs:
    path: /v3/api-docs
  group-configs:
    - group: 'default'
      paths-to-match: '/**'
      packages-to-scan: org.whl.airapi.controller
# knife4j的增强配置，不需要增强可以不配
knife4j:
  enable: true
  setting:
    language: zh_cn
  basic:
    # 启用基本认证
    enable: true
    # 设置用户名
    username: admin
    # 设置密码
    password: wanghaolin

```


###dto传输对象
 **org.whl.airapi.dto.AirPollution** 


```
package org.whl.airapi.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.whl.airapi.dto.AirPollution;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 9:59
 */
@Mapper
public interface AirPollutionMapper extends BaseMapper<AirPollution> {
}

```

 **org.whl.airapi.dto.Hum** 


```
package org.whl.airapi.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.whl.airapi.dto.AirPollution;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 9:59
 */
@Mapper
public interface AirPollutionMapper extends BaseMapper<AirPollution> {
}

```


###mapper持久层

 **org.whl.airapi.mapper.AirPollutionMapper** 


```
package org.whl.airapi.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.whl.airapi.dto.AirPollution;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 9:59
 */
@Mapper
public interface AirPollutionMapper extends BaseMapper<AirPollution> {
}

```

 **org.whl.airapi.mapper.HumMapper** 


```
package org.whl.airapi.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.whl.airapi.dto.Hum;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 9:59
 */
@Mapper
public interface HumMapper extends BaseMapper<Hum> {
}

```


###service服务层

 **org.whl.airapi.service.AirPollutionService** 

package org.whl.airapi.service;


```
import  com.baomidou.mybatisplus.extension.service.IService;
import org.whl.airapi.dto.AirPollution;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 10:09
 */
public interface AirPollutionService extends IService<AirPollution> {
}
```


 **org.whl.airapi.service.HumService** 


```
package org.whl.airapi.service;

import com.baomidou.mybatisplus.extension.service.IService;

import org.whl.airapi.dto.Hum;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 10:09
 */
public interface HumService extends IService<Hum> {
}

```


 **org.whl.airapi.service.impl.AirPollutionServiceImpl** 


```
 package org.whl.airapi.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
import org.whl.airapi.dto.AirPollution;
import org.whl.airapi.mapper.AirPollutionMapper;
import org.whl.airapi.service.AirPollutionService;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 10:10
 *  extends ServiceImpl<AirPollutionMapper, AirPollution> implements AirPollutionService
 */
@Service
public class AirPollutionServiceImpl extends ServiceImpl<AirPollutionMapper, AirPollution> implements AirPollutionService {
}

```


 **org.whl.airapi.service.impl.HumServiceImpl** 


```
package org.whl.airapi.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

import org.whl.airapi.dto.Hum;

import org.whl.airapi.mapper.HumMapper;

import org.whl.airapi.service.HumService;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 10:10
 *  extends ServiceImpl<AirPollutionMapper, AirPollution> implements AirPollutionService
 */
@Service
public class HumServiceImpl extends ServiceImpl<HumMapper, Hum> implements HumService {
}

```


###controller控制层

 **org.whl.airapi.controller.AirPollutionController** 


```
package org.whl.airapi.controller;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.whl.airapi.dto.AirPollution;
import org.whl.airapi.service.AirPollutionService;
import org.whl.airapi.util.list.ListToChart;
import java.util.List;

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 10:12
 */
@RestController
@RequestMapping("/Air")
@RequiredArgsConstructor
public class AirPollutionController {
    private final AirPollutionService airPollutionService;

    @GetMapping("/Pollution")
    public List<List<Object>> airPollutionZhuxingtu() throws IllegalAccessException {
        List<AirPollution> airpo = airPollutionService.list();
        // 使用 ListToChart 工具类生成柱状图和折线图的数据
        List<List<Object>> chartData = ListToChart.baseLine(airpo, AirPollution.class);

        // 返回结果
        return chartData;

    }


}

```


 **org.whl.airapi.controller.HumController** 


```
package org.whl.airapi.controller;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.whl.airapi.dto.Hum;
import org.whl.airapi.service.HumService;
import org.whl.airapi.util.list.ListToChart;
import java.util.List;
/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/26 10:12
 */
@RestController
@RequestMapping("/Air")
@RequiredArgsConstructor
public class HumController {
    private final HumService airPollutionService;

    @GetMapping("/Hum")
    public List<List<Object>> airPollutionZhuxingtu() throws IllegalAccessException {
        List<Hum> airpo = airPollutionService.list();
        // 使用 ListToChart 工具类生成柱状图和折线图的数据
        List<List<Object>> chartData = ListToChart.baseLine(airpo, Hum.class);

        // 返回结果
        return chartData;

    }


}

```

##运行数据接口

![输入图片说明](./img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-12-30%20153924.png)



##可得到接口文档和数据

![输入图片说明](./img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-12-30%20154256.png)

![输入图片说明](./img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-12-30%20154056.png)

![输入图片说明](./img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-12-30%20154107.png)


#### vue+echarts+datav


##### 1、创建工程


```
npm create vite@latest
```



```
cd heart-view

npm install

npm run dev
```



#### 2、安装项目依赖模块


```
npm install @types/node --save-dev

npm install vue-router@4

npm install animate.css --save
npm install gsap --save

npm install fetch --save
npm install axios --save

npm install pinia

npm install less less-loader -D
npm install sass sass-loader --save-dev
npm install scss scss-loader --save-dev

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

npm install echarts echarts-wordcloud --save
npm install @kjgl77/datav-vue3

```


#### 3、配置项目

vite.config.ts

## **tsconfig.node.json** 


```
{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* 路径别名 */
    "types": ["node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["vite.config.ts"]
}

```


 **tsconfig.json** 

```
//{
//  "files": [],
//  "references": [
//    { "path": "./tsconfig.app.json" },
//    { "path": "./tsconfig.node.json" }
//  ],
//}
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    // 其他配置项
  }
}

```


####  3.1 配置路径别名
 vite.config.ts


```
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'
const base_url:string = 'http://192.168.10.1:8080'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // resolvers: [ElementPlusResolver({importStyle: "sass"})],
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: '0.0.0.0',
    strictPort: true,
    open: false,
    proxy: {
      // 使用 proxy 实例
      '/api': {
        target: base_url,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, 'api'),
      },
    }
  },
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData: '@import "./src/styles/scss_variable.scss";'
        additionalData: `@use "./src/styles/scss_variable.scss" as *;`,
      }
    }
  }
})

```

#### 3.2 引入路由


#### 3.2.1 创建路由出口视图并在 app.vue 组件中引入 路由出口视图

 **src/components/DataV.vue** 

```
<script setup lang="ts">
import TopHeader from "../views/TopHeader/IndexView.vue";
</script>

<template>
  <div id="app_container">
    <!-- 全屏容器 -->
    <dv-full-screen-container>
      <div class="common-layout">
        <el-container>
          <el-header>
            <top-header/>
          </el-header>
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/scss_variable";
//.el-main{
//  padding-top: 50px;
//}
</style>
```



##app.vue


```
<script setup lang="ts">
import DataV from "./components/DataV.vue";
</script>

<template>
  <data-v/>
</template>

<style scoped>
</style>

```


#### 3.2.2 创建路由文件

src/routers/router.ts


```
// 1. 定义路由组件.
// 也可以从其他文件导入
import {createMemoryHistory, createRouter, RouteRecordRaw} from 'vue-router'
import Main from '../views/Main/IndexView.vue'
// 2. 定义一些路由
const routes: Array<RouteRecordRaw> = [
  {
    name: 'main',
    path: '/',
    component: Main,
  },
  // 处理 404
  {path: '/:pathMatch(.*)*', redirect: "/"},
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。
  // memory 模式。createMemoryHistory
  // hash 模式。createWebHashHistory
  // html5 模式。createWebHistory
  history: createMemoryHistory(),
  routes,
})

export default router
```


#### 3.2.3 引入路由配置文件

main.ts


```
import {createApp} from 'vue';
import './style.css';
import App from './App.vue';
import router from "./routers/router.ts";

const app = createApp(App);
app.use(router);
app.mount('#app');


```


#### 3.3 引入 animate.css 动画库

main.ts


```
import {createApp} from 'vue';
import './style.css';
import 'animate.css'
import App from './App.vue';
import router from "./routers/router.ts";

const app = createApp(App);
app.use(router);
app.mount('#app');

```


##### 3.4 引入 pinia


```
  import {createApp} from 'vue';
import './style.css';
import 'animate.css'
import App from './App.vue';
import router from "./routers/router.ts";
import {createPinia} from "pinia";
const app = createApp(App);
// 需要注意的是从pinia中解构出来的createPinia是一个函数,挂载前需要先调用执行
// const pinia = createPinia()
// app.use(pinia)
app.use(createPinia())
app.use(router);
app.mount('#app');
  
```



##### 3.4.1 编写状态管理文件strore.ts

src/strors/store.ts


```
import {defineStore} from 'pinia'

export const useStore = defineStore('main', () => {
  // ref() 和 reactive() 就是 state 属性
  // computed() 就是 getters
  // function() 就是 actions

  return {}
});
```


##### 3.4.2 引入 pinia

main.ts


```
import {createApp} from 'vue';
import './style.css';
import 'animate.css'
import App from './App.vue';
import router from "./routers/router.ts";
import {createPinia} from "pinia";
const app = createApp(App);
// 需要注意的是从pinia中解构出来的createPinia是一个函数,挂载前需要先调用执行
// const pinia = createPinia()
// app.use(pinia)
app.use(createPinia())
app.use(router);
app.mount('#app');

```


##### 3.5 配置 scss

#### 3.5.1 编写scss 变量存储文件 scss_variable.scss

 **src/styles/scss_variable.scss** 


```
// 单个图表 宽度和高度
$chart-width: 100%;
$chart-height: 100%;
```


##### 3.5.2 引入 scss 变量配置文件 scss_variable.scss

vite.config.ts


```
import {defineConfig} from 'vite'

import { resolve } from 'path'
const base_url:string = 'http://192.168.10.1:8080'
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    strictPort: true,
    open: false,
    proxy: {
      // 使用 proxy 实例
      '/api': {
        target: base_url,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, 'api'),
      },
    }
  },
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData: '@import "./src/styles/scss_variable.scss";'
        additionalData: `@use "./src/styles/scss_variable.scss" as *;`,
      }
    }
  }
})

```


#### 3.6 配置 element plus

完整引入

按需导入

自动导入（本配置使用自动加载）

 **vite.config.ts** 


```
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'
const base_url:string = 'http://192.168.10.1:8080'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // resolvers: [ElementPlusResolver({importStyle: "sass"})],
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: '0.0.0.0',
    strictPort: true,
    open: false,
    proxy: {
      // 使用 proxy 实例
      '/api': {
        target: base_url,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, 'api'),
      },
    }
  },
  resolve:{//路径别名
    alias:{
      '@': resolve(__dirname,'./src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData: '@import "./src/styles/scss_variable.scss";'
        additionalData: `@use "./src/styles/scss_variable.scss" as *;`,
      }
    }
  }
})

```


#### 3.7 echarts公共组件

src/components/ChartLhz.vue


```
<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-wordcloud'
import {onMounted, reactive, ref} from "vue";

const chartLhz = ref();

// const chartLhz = useTemplateRef('chartLhz');
// 接受父组件传递的图表的配置项和数据
const props = defineProps(['chart_option'])
const {chart_option} = props;
// 指定图表的配置项和数据
const option = reactive({});

function chartLhzInit() {
  // 基于准备好的dom，初始化echarts实例
  let LhzChart = echarts.init(chartLhz.value);
  // 指定图表的配置项和数据
  for (const filed in chart_option) {
    // 将父组件中传递过来的对象属性赋值给本地的对象
    option[filed] = chart_option[filed];
  }
  // 使用刚指定的配置项和数据显示图表。
  LhzChart.setOption(option);
  window.addEventListener('resize', () => {
    LhzChart.resize();
  })
}

onMounted(() => {
  // 在挂载阶段 初始化 echarts 实例
  chartLhzInit();
});
</script>

<template>
  <div id="chartLhz" ref="chartLhz"></div>
</template>

<style scoped lang="scss">
#chartLhz {
  width: 100%;
  height: 100%;
}
</style>
```


#### 3.8 引入 datav

##commons.css


```
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
```


##main.ts


```
import {createApp} from 'vue'
// import './style.css'
import './assets/css/commons.css'
import 'animate.css'
import {createPinia} from "pinia"
import App from './App.vue'
import DataVVue3 from '@kjgl77/datav-vue3'
import router from './routers/router.ts'
// import axios from 'axios'
// axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
// axios.defaults.baseURL = 'http://localhost:8080'
const app = createApp(App)
// 需要注意的是从pinia中解构出来的createPinia是一个函数,挂载前需要先调用执行
// const pinia = createPinia()
// app.use(pinia)
app.use(createPinia())
app.use(DataVVue3)
app.use(router)
app.mount('#app')

```


#### 3.9 工具

src/utils/lhz-util.ts


```
/**
 * 数据转换
 */
class Transpose {
  /**
   * 行列转换
   * @param matrix 二维矩阵
   * @return 行列转换后的二维矩阵
   */
  transposeMatrix(matrix: any[][]): any[][] {
    // 获取原矩阵的行数和列数
    const rows = matrix.length;
    const cols = matrix[0].length;

    // 初始化转置矩阵
    const transposed = new Array(cols).fill(0).map(() => new Array(rows).fill(0));

    // 转置操作
    for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        transposed[j][i] = matrix[i][j];
      }
    }

    return transposed;
  }

  /**
   * 中国 省份 直辖市 特别行政区 名称转换
   * @param regionName 转换前地区名称只有完整地区名称前两个字
   * @return 完整地区名称
   */
  formatRegionName(regionName: string): string {
    let map = new Map();
    map.set("北京", "北京市");
    map.set("天津", "天津市");
    map.set("河北", "河北省");
    map.set("山西", "山西省");
    map.set("内蒙古", "内蒙古自治区");
    map.set("辽宁", "辽宁省");
    map.set("吉林", "吉林省");
    map.set("黑龙江", "黑龙江省");
    map.set("上海", "上海市");
    map.set("江苏", "江苏省");
    map.set("浙江", "浙江省");
    map.set("安徽", "安徽省");
    map.set("福建", "福建省");
    map.set("江西", "江西省");
    map.set("山东", "山东省");
    map.set("河南", "河南省");
    map.set("湖北", "湖北省");
    map.set("湖南", "湖南省");
    map.set("广东", "广东省");
    map.set("广西", "广西壮族自治区");
    map.set("海南", "海南省");
    map.set("重庆", "重庆市");
    map.set("四川", "四川省");
    map.set("贵州", "贵州省");
    map.set("云南", "云南省");
    map.set("西藏", "西藏自治区");
    map.set("陕西", "陕西省");
    map.set("甘肃", "甘肃省");
    map.set("青海", "青海省");
    map.set("青海", "青海省");
    map.set("宁夏", "宁夏回族自治区");
    map.set("新疆", "新疆维吾尔自治区");
    map.set("台湾", "台湾省");
    map.set("香港", "香港特别行政区");
    map.set("澳门", "澳门特别行政区");
    return map.get(regionName) || regionName;
  }
}

/**
 * 身份证信息
 */
class idCard {
  /**
   * 获取出生日期
   * @param idCard 身份证
   * @return 出生日期 yyyy-MM-dd 格式
   */
  getBirthday(idCard: string): string {
    // return idCard.substring(6, 10) + '-' + idCard.substring(10, 12) + '-' + idCard.substring(12, 14);
    let array = [];
    array.push(idCard.substring(6, 10));
    array.push(idCard.substring(10, 12));
    array.push(idCard.substring(12, 14));
    return array.join('-');
  }

  /**
   * 获取年龄
   * @param idCard 身份证
   * @return 年龄
   */
  getAge(idCard: string) {
    let date = new Date();
    let age = date.getFullYear() - parseInt(idCard.substring(6, 10)) - 1;
    let month = date.getMonth() + 1;
    if (parseInt(idCard.substring(10, 12)) < month || parseInt(idCard.substring(10, 12)) == month && parseInt(idCard.substring(10, 12)) <= date.getDate()) {
      age++;
    }
    return age;
  }

  /**
   * 获取性别
   * @param  idCard 身份证
   * @returns 1代表男性 0代表女性
   */
  getGender(idCard: string): number {
    return parseInt(idCard.substring(16, 17)) % 2 === 1 ? 1 : 0;
  }
}

export default {
  transpose: new Transpose(),
  idCardUtil: new idCard(),
};
```


#### 4、页面布局

#### 4.1 全局scss

src/styles/scss_variable.scss


```
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#app_container {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #1F2327;
  color: #fff;

  #dv-full-screen-container {
    // 全屏容器可在此处设置背景图片
    background-image: url('@/assets/img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
}

.whl-row, .whl-col {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
}

.whl-row {
  flex-direction: row;
  justify-content: space-between;
}

.whl-col {
  flex-direction: column;
  align-items: center;
}
```


#### 4.2 主页布局

src/components/DataV.vue


```
<script setup lang="ts">

</script>

<template>
  <div id="app_container">
    <!-- 全屏容器 -->
    <dv-full-screen-container>
      <div class="common-layout">
        <el-container>
          
         
        </el-container>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/scss_variable";
//.el-main{
//  padding-top: 50px;
//}
</style>
```


该页面使用了element-plus 布局标签

#### 4.3 头部标题

 **src/views/TopHeader/IndexView.vue** 


```
<script setup lang="ts">

</script>

<template>
  <div id="top-header">
    <div id="title_content">空气污染指标分析</div>
  </div>
</template>

<style scoped lang="scss">
#top-header {
  text-align: center;
  #title_content {
    font-size: 3em;
    background-image: url('@/assets/img/title.png');
    background-size: 100% 100%;
  }
}

</style>
```


####4.4 主页引入头部组件

src/components/DataV.vue


```
<script setup lang="ts">
import TopHeader from "../views/TopHeader/IndexView.vue";
</script>

<template>
  <div id="app_container">
    <!-- 全屏容器 -->
    <dv-full-screen-container>
      <div class="common-layout">
        <el-container>
          <el-header>
            <top-header/>
          </el-header>
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/scss_variable";
//.el-main{
//  padding-top: 50px;
//}
</style>
```


#### 1. 可视化布局
#### 1.1 数据分析

数据分析

 **在pollution-analysis中** 

 **org.whl.pollution.analysis.TemAirquality** 


```
package org.whl.pollution.analysis

import org.apache.spark.sql.functions._
import org.apache.spark.sql.{Row, SparkSession}
import org.whl.util.spark.SparkUtil
/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 20:55
 */
object TemAirquality {
  def main(args: Array[String]): Unit = {
    //    val spark = SparkSession.builder.appName("AirQualityAnalysis").enableHiveSupport().getOrCreate()
    val spark: SparkSession = SparkUtil()
    // 从Hive数据库加载数据
    val df = spark.read.table("wanghaolin.whl_pollution")

    // 定义温度分段
    val tempRanges = Array((10, 20), (20, 30), (30, 40), (40, 50), (50, 60))

    // 初始化结果DataFrame的列
    var resultDF = spark.createDataFrame(Seq(
      ("10~20", 0, 0, 0, 0),
      ("20~30", 0, 0, 0, 0),
      ("30~40", 0, 0, 0, 0),
      ("40~50", 0, 0, 0, 0),
      ("50~60", 0, 0, 0, 0)
    )).toDF("Temperature", "Moderate", "Good", "Hazardous", "Poor")

    //调用隐式转换
    import spark.implicits._

    // 对每个温度范围进行过滤和计数
    tempRanges.foreach { range =>
      val filteredDF = df.filter($"Temperature" >= range._1 && $"Temperature" < lit(range._2))
        .groupBy("Air_Quality")
        .count()
        .collect()

      // 更新结果DataFrame
      filteredDF.foreach { case Row(quality: String, count: Long) =>
        val index = quality match {
          case "Moderate" => 0
          case "Good"    => 1
          case "Hazardous" => 2
          case "Poor"    => 3
        }
        //        resultDF = resultDF.withColumn(s"$" + quality, resultDF($"$" + quality) + lit(count.toInt))
        resultDF = resultDF.withColumn(quality, resultDF(quality) + lit(count.toInt))
      }
    }

    // 将结果DataFrame注册为临时视图，以便写入Hive表
    resultDF.createOrReplaceTempView("temp_view")

    // 将结果写入Hive表
    spark.sql("CREATE TABLE IF NOT EXISTS wanghaolin.whl_tem_air AS SELECT * FROM temp_view").collect()

    // 停止SparkSession
    spark.stop()
  }



}
```


#### 服务器提交


```
spark-submit --master yarn --deploy-mode cluster --class org.whl.pollution.analysis.TemAirquality pollution-analysis-jar-with-dependencies.jar
```


#### 分析结果同步到mysql


```
package org.whl.pollution.mysql

import org.apache.spark.sql.{SaveMode, SparkSession}
import org.whl.util.spark.SparkUtil

import java.util.Properties

/**
 * @author 王浩霖
 * @version 1.0.0 2024/12/25 21:54
 */
object TemAirMysql {
    def main(args: Array[String]): Unit = {
      // 获取 SparkSession 对象
      val sparkSession: SparkSession = SparkUtil()

      // 同步分析结果到mysql
      import sparkSession.sql

      // 每个年龄段患有心血管疾病患者人数
      val df_all = sql("select * from wanghaolin.whl_tem_air")
      val properties: Properties = SparkUtil.mysqlConnectionProperties("wanghaolin", "whl_tem_air")
      val url: String = properties.getProperty("url")
      val tableName: String = properties.getProperty("tableName")
      df_all.write.mode(SaveMode.Overwrite).jdbc(url = url, table = tableName, connectionProperties = properties)

      sparkSession.stop()
    }

}
```



####  1.2 数据可视化布局

src/views/Main/IndexView.vue


```
<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, reactive} from "vue";
import bottom from '../Bottom/Bottom.vue'
import left from '../Top/Left.vue'
import center from '../Top/Center.vue'
import right from '../Top/Right.vue'
import habit from '../Habit/IndexView.vue'

const air_data: any = reactive([])
const hum_data: any = reactive([])
function getData() {
  axios.get("/api/Air/Pollution").then((response) => {
    air_data.value = response.data
    // console.log(age_data)
  });
}

const air_chart_data = computed(() => {
  return air_data.value;
});

function getData2() {
  axios.get("/api/Air/Hum").then((response) => {
    hum_data.value = response.data
     // console.log(hum_data)
  });
}
const hum_chart_data = computed(() => {
  return hum_data.value;
});

onMounted(() => {
  getData()
})
onMounted(() => {
  getData2()
})
</script>

<template>
  <!-- 第一行 -->
  <div class="whl-row">
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>20~30℃时空气状况分布</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <left :chart_option="air_chart_data" v-if="air_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>北上广空气含量分布</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <center :chart_option="air_chart_data" v-if="air_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>不同湿度下的空气成分含量</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <right :chart_option="hum_chart_data" v-if="hum_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
  </div>
  <!-- 第二行 年龄段患病比例 -->
<!--  <div class="whl-row">-->
    <div class="whl-col ccooll" >
      <div class="count-base">
        <div class="com-count-title"><h1>不同温度下的空气质量</h1></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <bottom :chart_option="air_chart_data" v-if="air_data.value"/>
<!--            <Habit :chart_option="hum_chart_data" v-if="hum_data.value"/>-->
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
<!--  </div>-->


</template>

<style scoped lang="scss">
@use "@/styles/scss_variable";

.ccooll{
  bottom: 0;
}

.whl-col > div {
  width: 100%;
  //height: 470px;
}

.count-base,
.count-resource,
.count-share,
.count-topic {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  box-sizing: border-box;
  text-align: center;
}

/*单个图表容器*/
.count-base {
  background: url('@/assets/img/left-top3.jpg') center no-repeat;
  background-size: cover;
}

/*标题*/
.com-count-title {
  color: #1bb4f9;
  font-size: 18px;
  padding: 0;
}

/*显示区域*/
.com-screen-content {
  width: 100%;
  height: auto;
  //height: 400px;
}


/*四角*/
.left-top,
.right-top,
.left-bottom,
.right-bottom {
  position: absolute;
  width: 13px;
  height: 13px;
}

.left-top,
.right-top {
  top: 0;
  border-top: solid 2px #045291;
}

.left-bottom,
.right-bottom {
  bottom: 0;
  border-bottom: solid 2px #045291;
}

.left-top {
  left: 0;
  border-left: solid 2px #045291;
}

.right-top {
  right: 0;
  border-right: solid 2px #045291;
}

.left-bottom {
  left: 0;
  border-left: solid 2px #045291;
}

.right-bottom {
  right: 0;
  border-right: solid 2px #045291;
}




</style>
```


#### 1.3  **20~30℃时空气状况分布**

 **src/views/Top/Left.vue** 


```
<script setup lang="ts">
import ChartLhz from '../../components/ChartLhz.vue'
import {computed} from "vue";

const props = defineProps(["chart_option"])
const { chart_option } = props
const options = computed(() => {

  // 提取chart_option中的数据
  const names = chart_option[6] || []; // ['温和', '好', '恶劣', '较差']
  const values = chart_option[2] || []; // [92, 114, 56, 67]

  // 创建data数组
  const data1 = names.map((name, index) => ({
    value: values[index],
    name: name,
  }));

 let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: 'white' // 默认颜色
      },
    },
   toolbox: {
     feature: {
       saveAsImage: {}
     }
   },
    series: [
      {
        name: '20~30℃时空气状况分布',
        type: 'pie',
        radius: '50%',
        data:data1,
        // data: [
        //   // { value: 1048, name: 'Search Engine' },
        //   // { value: 735, name: 'Direct' },
        //   // { value: 580, name: 'Email' },
        //   // { value: 484, name: 'Union Ads' },
        //   // { value: 300, name: 'Video Ads' }
        //   { value: chart_option[1][0], name: chart_option[6][0] },
        //   { value: chart_option[1][1], name: chart_option[6][1] },
        //   { value: chart_option[1][2], name: chart_option[6][2] },
        //   { value: chart_option[1][3], name: chart_option[6][3] },
        // ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  console.log(chart_option)
  return option
})
</script>

<template>
  <chart-lhz :chart_option="options" v-if="chart_option"></chart-lhz>
</template>

<style scoped lang="scss">

</style>
```


#### 1.4  **北上广空气含量分布** 

 **src/views/Top/Center.vue** 

```
<script setup lang="ts">
import ChartLhz from '../../components/ChartLhz.vue'
import {computed} from "vue";

const props = defineProps(["chart_option"])
const { chart_option } = props

const dataBJ = [
  [55, 9, 56, 0.46, 18, 6, 1],
  [25, 11, 21, 0.65, 34, 9, 2],
  [56, 7, 63, 0.3, 14, 5, 3],
  [33, 7, 29, 0.33, 16, 6, 4],
  [42, 24, 44, 0.76, 40, 16, 5],
  [82, 58, 90, 1.77, 68, 33, 6],
  [74, 49, 77, 1.46, 48, 27, 7],
  [78, 55, 80, 1.29, 59, 29, 8],
  [267, 216, 280, 4.8, 108, 64, 9],
  [185, 127, 216, 2.52, 61, 27, 10],
  [39, 19, 38, 0.57, 31, 15, 11],
  [41, 11, 40, 0.43, 21, 7, 12],
  [64, 38, 74, 1.04, 46, 22, 13],
  [108, 79, 120, 1.7, 75, 41, 14],
  [108, 63, 116, 1.48, 44, 26, 15],
  [33, 6, 29, 0.34, 13, 5, 16],
  [94, 66, 110, 1.54, 62, 31, 17],
  [186, 142, 192, 3.88, 93, 79, 18],
  [57, 31, 54, 0.96, 32, 14, 19],
  [22, 8, 17, 0.48, 23, 10, 20],
  [39, 15, 36, 0.61, 29, 13, 21],
  [94, 69, 114, 2.08, 73, 39, 22],
  [99, 73, 110, 2.43, 76, 48, 23],
  [31, 12, 30, 0.5, 32, 16, 24],
  [42, 27, 43, 1, 53, 22, 25],
  [154, 117, 157, 3.05, 92, 58, 26],
  [234, 185, 230, 4.09, 123, 69, 27],
  [160, 120, 186, 2.77, 91, 50, 28],
  [134, 96, 165, 2.76, 83, 41, 29],
  [52, 24, 60, 1.03, 50, 21, 30],
  [46, 5, 49, 0.28, 10, 6, 31]
];
const dataGZ = [
  [26, 37, 27, 1.163, 27, 13, 1],
  [85, 62, 71, 1.195, 60, 8, 2],
  [78, 38, 74, 1.363, 37, 7, 3],
  [21, 21, 36, 0.634, 40, 9, 4],
  [41, 42, 46, 0.915, 81, 13, 5],
  [56, 52, 69, 1.067, 92, 16, 6],
  [64, 30, 28, 0.924, 51, 2, 7],
  [55, 48, 74, 1.236, 75, 26, 8],
  [76, 85, 113, 1.237, 114, 27, 9],
  [91, 81, 104, 1.041, 56, 40, 10],
  [84, 39, 60, 0.964, 25, 11, 11],
  [64, 51, 101, 0.862, 58, 23, 12],
  [70, 69, 120, 1.198, 65, 36, 13],
  [77, 105, 178, 2.549, 64, 16, 14],
  [109, 68, 87, 0.996, 74, 29, 15],
  [73, 68, 97, 0.905, 51, 34, 16],
  [54, 27, 47, 0.592, 53, 12, 17],
  [51, 61, 97, 0.811, 65, 19, 18],
  [91, 71, 121, 1.374, 43, 18, 19],
  [73, 102, 182, 2.787, 44, 19, 20],
  [73, 50, 76, 0.717, 31, 20, 21],
  [84, 94, 140, 2.238, 68, 18, 22],
  [93, 77, 104, 1.165, 53, 7, 23],
  [99, 130, 227, 3.97, 55, 15, 24],
  [146, 84, 139, 1.094, 40, 17, 25],
  [113, 108, 137, 1.481, 48, 15, 26],
  [81, 48, 62, 1.619, 26, 3, 27],
  [56, 48, 68, 1.336, 37, 9, 28],
  [82, 92, 174, 3.29, 0, 13, 29],
  [106, 116, 188, 3.628, 101, 16, 30],
  [118, 50, 0, 1.383, 76, 11, 31]
];
const dataSH = [
  [91, 45, 125, 0.82, 34, 23, 1],
  [65, 27, 78, 0.86, 45, 29, 2],
  [83, 60, 84, 1.09, 73, 27, 3],
  [109, 81, 121, 1.28, 68, 51, 4],
  [106, 77, 114, 1.07, 55, 51, 5],
  [109, 81, 121, 1.28, 68, 51, 6],
  [106, 77, 114, 1.07, 55, 51, 7],
  [89, 65, 78, 0.86, 51, 26, 8],
  [53, 33, 47, 0.64, 50, 17, 9],
  [80, 55, 80, 1.01, 75, 24, 10],
  [117, 81, 124, 1.03, 45, 24, 11],
  [99, 71, 142, 1.1, 62, 42, 12],
  [95, 69, 130, 1.28, 74, 50, 13],
  [116, 87, 131, 1.47, 84, 40, 14],
  [108, 80, 121, 1.3, 85, 37, 15],
  [134, 83, 167, 1.16, 57, 43, 16],
  [79, 43, 107, 1.05, 59, 37, 17],
  [71, 46, 89, 0.86, 64, 25, 18],
  [97, 71, 113, 1.17, 88, 31, 19],
  [84, 57, 91, 0.85, 55, 31, 20],
  [87, 63, 101, 0.9, 56, 41, 21],
  [104, 77, 119, 1.09, 73, 48, 22],
  [87, 62, 100, 1, 72, 28, 23],
  [168, 128, 172, 1.49, 97, 56, 24],
  [65, 45, 51, 0.74, 39, 17, 25],
  [39, 24, 38, 0.61, 47, 17, 26],
  [39, 24, 39, 0.59, 50, 19, 27],
  [93, 68, 96, 1.05, 79, 29, 28],
  [188, 143, 197, 1.66, 99, 51, 29],
  [174, 131, 174, 1.55, 108, 50, 30],
  [187, 143, 201, 1.39, 89, 53, 31]
];
const lineStyle = {
  width: 1,
  opacity: 0.5
};

const options = computed(() => {
  // let option = {
  //   // title: {
  //   //   text: 'Basic Radar Chart'
  //   // },
  //   legend: {
  //     data: ['Allocated Budget', 'Actual Spending'],
  //     textStyle: {
  //       color: 'yellow' // 这里可以设置 legend 文本的颜色
  //     }
  //   },
  //   radar: {
  //     // shape: 'circle',
  //     indicator: [
  //       { name: 'SO2', max: 6500 },
  //       { name: 'PM2.5', max: 16000 },
  //       { name: 'PM10', max: 30000 },
  //       { name: 'NO2', max: 38000 },
  //       { name: 'CO', max: 52000 },
  //       { name: 'Humidity', max: 25000 }
  //     ]
  //   },
  //   series: [
  //     {
  //       name: '污染等级',
  //       type: 'radar',
  //       data: [
  //         {
  //           value: [4200, 3000, 20000, 35000, 50000, 18000],
  //           name: ''
  //         },
  //         {
  //           value: [5000, 14000, 28000, 26000, 42000, 21000],
  //           name: ''
  //         },
  //         {
  //           value: [5500, 15000, 18000, 22000, 32000, 11000],
  //           name: ''
  //         },
  //         {
  //           value: [5800, 14800, 8000, 28000, 2000, 2000],
  //           name: ''
  //         }
  //       ]
  //     }
  //   ]
  // };
  let option = {
    backgroundColor: '#161627',
    // title: {
    //   text: 'AQI - Radar',
    //   left: 'center',
    //   textStyle: {
    //     color: '#eee'
    //   }
    // },
    legend: {
      bottom: 5,
      data: ['Beijing', 'Shanghai', 'Guangzhou'],
      itemGap: 20,
      textStyle: {
        color: '#fff',
        fontSize: 14
      },
      selectedMode: 'single'
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    radar: {
      indicator: [
        { name: 'AQI', max: 300 },
        { name: 'PM2.5', max: 250 },
        { name: 'PM10', max: 300 },
        { name: 'CO', max: 5 },
        { name: 'NO2', max: 200 },
        { name: 'SO2', max: 100 }
      ],
      shape: 'circle',
      splitNumber: 5,
      axisName: {
        color: 'rgb(238, 197, 102)'
      },
      splitLine: {
        lineStyle: {
          color: [
            'rgba(238, 197, 102, 0.1)',
            'rgba(238, 197, 102, 0.2)',
            'rgba(238, 197, 102, 0.4)',
            'rgba(238, 197, 102, 0.6)',
            'rgba(238, 197, 102, 0.8)',
            'rgba(238, 197, 102, 1)'
          ].reverse()
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(238, 197, 102, 0.5)'
        }
      }
    },
    series: [
      {
        name: 'Beijing',
        type: 'radar',
        lineStyle: lineStyle,
        data: dataBJ,
        symbol: 'none',
        itemStyle: {
          color: '#F9713C'
        },
        areaStyle: {
          opacity: 0.1
        }
      },
      {
        name: 'Shanghai',
        type: 'radar',
        lineStyle: lineStyle,
        data: dataSH,
        symbol: 'none',
        itemStyle: {
          color: '#B3E4A1'
        },
        areaStyle: {
          opacity: 0.05
        }
      },
      {
        name: 'Guangzhou',
        type: 'radar',
        lineStyle: lineStyle,
        data: dataGZ,
        symbol: 'none',
        itemStyle: {
          color: 'rgb(238, 197, 102)'
        },
        areaStyle: {
          opacity: 0.05
        }
      }
    ]
  };

  return option

})
</script>

<template>
  <chart-lhz :chart_option="options" v-if="chart_option"></chart-lhz>
</template>

<style scoped lang="scss">

</style>
```


#### 1.5  **不同湿度下的空气成分含量** 

 **src/views/Top/Right.vue** 


```
<script setup lang="ts">
import ChartLhz from '../../components/ChartLhz.vue'
import {computed} from "vue";
// import * as echarts from 'echarts';
// import 'echarts/extension/bmap/bmap';
const props = defineProps(["chart_option"])
const { chart_option } = props
console.log(chart_option[1])
const options = computed(() => {
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {textStyle: {
        color: 'white' // 默认颜色
      },},
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['30~50', '50~70', '70~90', '90~110']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '30~50',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        // data: [320, 332, 301, 334, 390, 330, 320]
        data:[38,
          3,
          11,
          32,
          2]
      },
      {
        name: '',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        // data: [120, 132, 101, 134, 90, 230, 210]
        data:[25,
          5,
          55,
          69,
          7]
      },
      {
        name: '',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        // data: [220, 182, 191, 234, 290, 330, 310]
        data:[18,
          2,
          36,
          80,
          5]
      },
      {
        name: 'CO',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'O3',
        type: 'bar',
        // data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        data:[ 13,
          8,
          27,
          41,
          3],
        emphasis: {
          focus: 'series'
        },
        markLine: {
          lineStyle: {
            type: 'dashed'
          },
          data: [[{type: 'min'}, {type: 'max'}]]
        }
      }
    ]
  }

  option.series[0].name = chart_option[5][0]; // PM2.5 标题
  option.series[1].name = chart_option[5][1]; // PM10 标题
  option.series[2].name = chart_option[5][2]; // SO2 标题
  option.series[3].name = chart_option[5][3]; // NO2 标题
  option.series[4].name = chart_option[5][4]; // CO 标题

    // 在这里设置 series 的 data
    // option.series[0].data = chart_option[1]; // PM2.5 数据
    // option.series[1].data = chart_option[2]; // PM10 数据
    // option.series[2].data = chart_option[3]; // SO2 数据
    // option.series[3].data = chart_option[4]; // NO2 数据
    // option.series[4].data = chart_option[0]; // CO 数据
  return option

})
</script>

<template>
  <chart-lhz :chart_option="options" v-if="chart_option">1</chart-lhz>
</template>

<style scoped lang="scss">

</style>
```


#### 1.6  **不同温度下的空气质量** 

 **src/views/Bottom/Bottom.vue** 


```
<script setup lang="ts">
import {computed} from "vue";
import ChartLhz from '../../components/ChartLhz.vue'

const props = defineProps(["chart_option"])
const { chart_option } = props
const options = computed(() => {
  let option = {
    title: {
      text: '某地区空气质量',
      textStyle: {
        color: 'orange', // 标题颜色
        fontSize: 18, // 字号大小
        fontWeight: 'bold' // 字体加粗
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      }
    },
    series: [

      {
        name: '',
        type: 'line',
        stack: 'Total',
        data: [92,103,156,91,89]
      },
      {
        name: '',
        type: 'line',
        stack: 'Total',
        data: [114,209,178,144,120]
      },
      {
        name: '',
        type: 'line',
        stack: 'Total',
        data: [56,89,103,186,256]
      },
      {
        name: '',
        type: 'line',
        stack: 'Total',
        data: [67,56,46,113,126]
      },
    ]
  };
  option.xAxis.data=chart_option[0]
  // console.log(chart_option)
  const names:Array<string> = ["Moderate","Good","Hazardous","Poor"]
  option.legend.data=[]
  for(const name of names){
    option.legend.data.push(name)
  }

  option.series[0].name=chart_option[6][0]
  option.series[1].name=chart_option[6][1]
  option.series[2].name=chart_option[6][2]
  option.series[3].name=chart_option[6][3]


  // option.series[0].data=chart_option[1]
  // option.series[1].data=chart_option[2]
  // option.series[2].data=chart_option[3]
  // option.series[3].data=chart_option[4]
  // option.series=[]

  // let name1=[]
  //   for(let n=0;n<4;n++){
  //     for(let m=0;m<5;m++)
  //     {
  //     name1[m][n]=names[m][n]
  //     }
  //   }
  //   console.log(name1)


  // for(let i=1;i<5;i++){
  //   let arr=[]
  //
  //     // for(let m=0;m<7;m++){
  //     //   for(let n=0;n<4;n++) {
  //     //     arr = chart_option[m][n]
  //     //     console.log(arr)
  //     //   }
  //     // }
  //
  //   option.series.push(
  //       {
  //         name: names.shift(),
  //         type: 'line',
  //         stack: 'Total',
  //         data: chart_option[i]
  //       }
  //   )
  // }
  //92 114 56 67
  //103 209 89 56
  //156 178 103 46
  //91 144 186 113
  //89 102 256 126


  return option
})
</script>

<template>
  <chart-lhz :chart_option="options" v-if="chart_option"></chart-lhz>
</template>


<style scoped>
</style>
```


#### 2.  **主页面布局** 

#### 2.1 IndexView.vue

 **src/views/Main/IndexView.vue** 


```
<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, reactive} from "vue";
import bottom from '../Bottom/Bottom.vue'
import left from '../Top/Left.vue'
import center from '../Top/Center.vue'
import right from '../Top/Right.vue'
import habit from '../Habit/IndexView.vue'

const air_data: any = reactive([])
const hum_data: any = reactive([])
function getData() {
  axios.get("/api/Air/Pollution").then((response) => {
    air_data.value = response.data
    // console.log(age_data)
  });
}

const air_chart_data = computed(() => {
  return air_data.value;
});

function getData2() {
  axios.get("/api/Air/Hum").then((response) => {
    hum_data.value = response.data
     // console.log(hum_data)
  });
}
const hum_chart_data = computed(() => {
  return hum_data.value;
});

onMounted(() => {
  getData()
})
onMounted(() => {
  getData2()
})
</script>

<template>
  <!-- 第一行 -->
  <div class="whl-row">
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>20~30℃时空气状况分布</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <left :chart_option="air_chart_data" v-if="air_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>北上广空气含量分布</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <center :chart_option="air_chart_data" v-if="air_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="whl-col">
      <div class="count-base">
        <div class="com-count-title"><h2>不同湿度下的空气成分含量</h2></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <right :chart_option="hum_chart_data" v-if="hum_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
  </div>
  <!-- 第二行 年龄段患病比例 -->
<!--  <div class="whl-row">-->
    <div class="whl-col ccooll" >
      <div class="count-base">
        <div class="com-count-title"><h1>不同温度下的空气质量</h1></div>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:300px;">
            <bottom :chart_option="air_chart_data" v-if="air_data.value"/>
<!--            <Habit :chart_option="hum_chart_data" v-if="hum_data.value"/>-->
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
<!--  </div>-->


</template>

<style scoped lang="scss">
@use "@/styles/scss_variable";

.ccooll{
  bottom: 0;
}

.whl-col > div {
  width: 100%;
  //height: 470px;
}

.count-base,
.count-resource,
.count-share,
.count-topic {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  box-sizing: border-box;
  text-align: center;
}

/*单个图表容器*/
.count-base {
  background: url('@/assets/img/left-top3.jpg') center no-repeat;
  background-size: cover;
}

/*标题*/
.com-count-title {
  color: #1bb4f9;
  font-size: 18px;
  padding: 0;
}

/*显示区域*/
.com-screen-content {
  width: 100%;
  height: auto;
  //height: 400px;
}


/*四角*/
.left-top,
.right-top,
.left-bottom,
.right-bottom {
  position: absolute;
  width: 13px;
  height: 13px;
}

.left-top,
.right-top {
  top: 0;
  border-top: solid 2px #045291;
}

.left-bottom,
.right-bottom {
  bottom: 0;
  border-bottom: solid 2px #045291;
}

.left-top {
  left: 0;
  border-left: solid 2px #045291;
}

.right-top {
  right: 0;
  border-right: solid 2px #045291;
}

.left-bottom {
  left: 0;
  border-left: solid 2px #045291;
}

.right-bottom {
  right: 0;
  border-right: solid 2px #045291;
}




</style>
```


![输入图片说明](./img/image.png)





#### 参与贡献

大数据5班第8组
组长：王浩霖
组员：崔卓斐，张三君
指导老师：李胜龙

#### 特技

1.  项目的数据在Kaggle等网站获取数据
2.  数据上传到HDFS后，使用Scala与Spark进行数据清洗和数据分析
3.  搭建数据接口
4.  以vue框架搭建数据可视化项目，通过echarts实现图片显示
5.  通过该项目可以分析得到不同温度下的空气质量和不同湿度下的空气成分含量变化。