使用json+echarts实现数据库数据的可视化

因为我上次是使用的另外一种方法实现的可视化,对json了解的不够,所以来补充一下这一块的知识点

1、新建一个SpringBoot项目

2、添加依赖

<dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
        </dependency>
<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.4</version>
        </dependency>

3、配置数据信息

application.properties改成application.yml之后,加入连接数据库的信息:

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
    username: root
    password: 20214063

4、编写后台代码

先导入这两个文件:

要是想要在web页面访问springboot生成的html页面,就需要将资源文件.yml文件改成这样:

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
    username: root
    password: 20214063
  web:
    resources:
      static-locations: classpath:/templates/, classpath:/static/

也就是加上了后面三行~

静态成功显示了!

下面开始在springboot后端基础下,开始使用ajax和json进行数据库数据的获取:

获取到了数据库的数据:

就是不知道为啥,x轴数据少了一半~

posted @ 2023-09-25 17:52  yesyes1  阅读(151)  评论(0编辑  收藏  举报