大数据可视化技术与应用 - 实验九 Echarts 整合 Spring boot 高级操作 - 《大数据》

实验目的
1、熟悉 JQuery 的使用方法
2、熟悉 JQuery 中 ajax 的使用步骤
3、掌握 Echarts、ajax 和 Springboot 的结合
实验环境
1、64 位电脑，8G 以上内存
2、win10 系统
3、IDEA2021 环境
实验步骤：
1. 首先是实现从 Controller 获取数据。在上一个实验基础上新建网页文件并且更改文件内容如下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询用户</title>
<!--    <script src="/jquery-3.5.1.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:800px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: 'ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['考试分数']
            },
            xAxis: {
                data: ["语文","数学","英语","地理","生物","化学"]
            },
            yAxis: {},
            series: [{
                name: '分数',
                type: 'bar',
                data: [75, 80, 76, 90, 80, 60]
            }]
        };
    </script>
</body>
</html>

建立传递数据的分数类

在项目目录下新建 pojo 包，并在包内建立 Score 类，如下图，为了方便管理，将 Users 类也移入包中，
也可以建立如下所示的 controller 包，并将 Echarts 类移入包中

Score 类的内容如下：

public class Score {
    private double Chinese;
    private double Math;
    private double English;
    private double Geography;
    private double Biology;
    private double Chymistry;
    //省略 get,set 和 toString 方法


    public double getChinese() {
        return Chinese;
    }

    public void setChinese(double chinese) {
        Chinese = chinese;
    }

    public double getMath() {
        return Math;
    }

    public void setMath(double math) {
        Math = math;
    }

    public double getEnglish() {
        return English;
    }

    public void setEnglish(double english) {
        English = english;
    }

    public double getGeography() {
        return Geography;
    }

    public void setGeography(double geography) {
        Geography = geography;
    }

    public double getBiology() {
        return Biology;
    }

    public void setBiology(double biology) {
        Biology = biology;
    }

    public double getChymistry() {
        return Chymistry;
    }

    public void setChymistry(double chymistry) {
        Chymistry = chymistry;
    }

    @Override
    public String toString() {
        return "Score{" +
                "Chinese=" + Chinese +
                ", Math=" + Math +
                ", English=" + English +
                ", Geography=" + Geography +
                ", Biology=" + Biology +
                ", Chymistry=" + Chymistry +
                '}';
    }
}

4. 建立用于前端访问的两个方法，如下
在Echarts中

@GetMapping("/login3") 
public String EchartTest3_1(Model model){ 
    // model.addAttribute("currentYear",2021); 
    return "echarts3"; 
}
@RequestMapping(value = "/index3",method = RequestMethod.POST) 
@ResponseBody 
public Score EchartTest3_2(Score score){ 
    // model.addAttribute("currentYear",2021); 
    score.setChinese(80); 
    score.setMath(100); 
    score.setEnglish(70); 
    score.setGeography(100); 
    score.setBiology(100); 
    score.setChymistry(60); 
    System.out.println(score); 
    // System.out.println("成功！"); 
    return score; 
}

运行程序，测试网页是否正常

6. 升级前端网页文件如下，使之能够接收后台数据。
添加：

        $.ajax({
            url:"/index3",
            type:"post",
            async:false,
            success:function(r) {
                console.log(r);
                var temp1 = r.chinese;
                option.series[0].data[0] = r.chinese;
                option.series[0].data[1] = r.math;
                option.series[0].data[2] = r.english;
                option.series[0].data[3] = r.geography;
                option.series[0].data[4] = r.biology;
                option.series[0].data[5] = r.chymistry;
                // myChart.setOption(option);
            }

        })

7. 运行程序，测试是否可以顺利从后台获取数据

8. 以下实现从数据库表中获取数，首先建立 pojo 类对应的数据表，并填入数据

CREATE TABLE `tb_score` ( 
  `ID` int(11) NOT NULL AUTO_INCREMENT, 
  `Chinese` decimal(6, 2) DEFAULT NULL, 
  `Math` decimal(6, 2) DEFAULT NULL, 
  `English` decimal(6, 2) DEFAULT NULL, 
  `Geography` decimal(6, 2) DEFAULT NULL, 
  `Biology` decimal(6, 2) DEFAULT NULL, 
  `Chymistry` decimal(6, 2) DEFAULT NULL, PRIMARY KEY (`ID`) USING BTREE 
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact; 
  INSERT INTO `tb_score` VALUES (1, 80.00, 90.00, 100.00, 10.00, 60.00, 20.00);

9. 引入 MySQL 和 MyBatis 的依赖

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

10.编写配置文件
在配置文件 application.properties 中添加以下内容

spring.datasource.url=jdbc:mysql://localhost:3306/echarts?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=1234

11.使用注解方式整合 MyBatis
1
在项目目录下创建 dao 包，在包中创建 Mapper 接口 ScoreMapper：使用注解@Mapper 和@Select,
关键代如下：

@Mapper
public interface ScoreMapper {
    @Select("select * from tb_Score where Id=#{Id}")
    public Score ScoreFindById(Integer Id);
}

2
编写测试方法进行接口方法测试及整合测试，关键代如下：

@Autowired 
private ScoreMapper scoreMapper; 
@Test 
void SelectScore(){ 
    Score score=scoreMapper.ScoreFindById(1); 
    System.out.println(score); 
}

12.让 Echarts 从数据库中获取数据
更改 Controller 中 index3 对应的方法，将以前的固定数据注销，增加从数据库读取的代码，如下图所示。

    @Autowired
    private ScoreMapper scoreMapper;
    @RequestMapping(value = "/index3",method = RequestMethod.POST)
    @ResponseBody
    public Score EchartTest3_2(Score score){
       Score score1=scoreMapper.ScoreFindById(1);
        return score1;
    }

13.运行，测试，如下图所示

修改数据库的数据，观察柱状图是否有改变。