springBoot+jpa+echart生成树状图和饼状图

最新推荐文章于 2023-09-18 11:15:13 发布
最新推荐文章于 2023-09-18 11:15:13 发布
阅读量211 收藏
点赞数 2
分类专栏： springBoot 文章标签： spring boot java spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63064991/article/details/128101307
版权

效果图

树状图
在这里插入图片描述
饼状图
在这里插入图片描述

项目结构

在这里插入图片描述

yml

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    cache: false


#  resources:
#    chain:
#      strategy:
#        content:
#          enabled: true
#    static-locations: classpath:/templates/ #页面运行路径
#
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/spring?useSSL=false&autoReconnect=true&useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
    password: root
    username: root

  web:
    resources:
      chain:
        strategy:
          content:
            paths: /**

server:
  port: 8084

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>2.7.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ech</groupId>
    <artifactId>demo1</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo1</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.24</version>
        </dependency>
    </dependencies>


    <build>
        <plugins>
            <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>
    </build>

</project>

实体类

package com.ech.pojo;

import lombok.Data;


import javax.persistence.*;
import java.io.Serializable;

@Data
@Entity
@Table(name = "table1")
public class Table1  implements Serializable {

    @Id
    @GeneratedValue(strategy= GenerationType.IDENTITY)
    @Column(name = "id")
    private Integer id;

    @Column(name = "name")
    private String name;

    @Column(name = "num")
    private Integer num;

}



package com.ech.pojo;

import lombok.Data;

import javax.persistence.*;
import java.io.Serializable;

@Data
@Entity
@Table(name = "table2")
public class Table2  implements Serializable {

    @Id
    @GeneratedValue(strategy= GenerationType.IDENTITY)
    @Column(name = "id")
    private Integer id;

    @Column(name = "name")
    private String name;

    @Column(name = "value")
    private Integer value;

}

service层

package com.ech.service;

import com.ech.dao.Table1Dao;
import com.ech.pojo.Table1;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class Table1Service {
    @Autowired
    Table1Dao table1Dao;
    public List<Table1> findAll(){
        return table1Dao.findAll();
    }
}



package com.ech.service;

import com.ech.dao.Table2Dao;
import com.ech.pojo.Table2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class Table2Service {
    @Autowired
    Table2Dao table2Dao;
    public List<Table2> findAll(){
        return table2Dao.findAll();
    }
}

controller层

package com.ech.controller;


import com.ech.pojo.Table1;
import com.ech.pojo.Table2;
import com.ech.service.Table1Service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class Table1Controller {
    @Autowired
    Table1Service table1Service;
    @RequestMapping("/firstApi")
    public List<Table1> findAll(){
        return table1Service.findAll();
    }
}


package com.ech.controller;


import com.ech.pojo.Table2;
import com.ech.service.Table2Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class Table2Controller {
    @Autowired
    Table2Service table2Service;
    @RequestMapping("/lastApi")
    public List<Table2> findAll(){
        return table2Service.findAll();
    }
}



package com.ech.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class HelloSpringBoot {

    @RequestMapping(value="/hello",method = RequestMethod.GET)
    public String sayHello(){

        return "Hello Spring Boot!";

    }

    @RequestMapping(value="/first",method = RequestMethod.GET)
    public ModelAndView firstDemo(){

        return new ModelAndView("test");//跟templates文件夹下的test.html名字一样，返回这个界面

    }

    @RequestMapping(value="/courseClickCount",method = RequestMethod.GET)
    public ModelAndView courseClickCountStat(){

        return new ModelAndView("demo");//跟templates文件夹下的demo.html名字一样，返回这个界面

    }
}

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

<script type="text/javascript">
  var option;
  var arr1=[]
  var arr2=[]
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id

  // 指定图表的配置项和数据
  $.get("lastApi",function(result){
    arr1=result;
    $.each(result,function (index,item) {
      arr2.push(item.name);
    })
    option={
      title : {
        text: '网络游戏热度统计',
        subtext: '游戏获得的票数',
        x:'center'
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: arr2
      },
      series : [
        {
          name: '票数数',
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:arr1,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  })
  // 使用刚指定的配置项和数据显示图表。

</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

<script type="text/javascript">
  var option;
  var arr1=[]
  var arr2=[]
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
  // 指定图表的配置项和数据
  $.get("firstApi",function (result) {
    $.each(result,function (index,item) {
      arr1.push(item.name);
      arr2.push(item.num);
    })
    option = {
      title: {
        text: '吃货大选拔'
      },
      tooltip: {},
      legend: {
        data:['票数']
      },
      xAxis: {
        data: arr1
      },
      yAxis: {},
      series: [{
        name: '票数',
        type: 'bar',
        data: arr2
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })
</script>
</body>
</html>

网上也有很多素材，其他的可以去官网看

一个二玩Java
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
spring boot 动态加载Echart饼状图
Amustrming的博客
11-15 2095
先从Echart官网上根据需要下载所需Echart版本，在页面中用script标签引入，这些在Echart官网上有教程。官网上有异步加载和更新Echart图，知道了是动态把查询到的结果按格式拼接到饼状图series里面的data中。 尝试一：在springboot的controller中把查询到的结果拼接好放在map里，跳转到页面， 然后在前台javascript中获取完成动态加载，发现饼状图中...
SpringBoot+Echarts+SpringDataJpa实现请求后台数据显示饼状图和条形图
Ronin_He的博客
11-13 597
前提 Echarts3官网 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。 通过 npm 获取 e...
SpringBoot+Echarts实现请求后台数据显示饼状图
08-25
主要介绍了SpringBoot+Echarts实现请求后台数据显示饼状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot整合echarts的树状图饼状图
Gfz80k的博客
11-13 1220
idea创建springboot项目 数据库结构 导入以下依赖 <dependencies> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> ...
用Springboot写饼状图
lojk333的博客
06-29 890
这是跳转 @RequestMapping("/pieChart") public String pieChart(){//跳转主页 return "PieChart"; } @RequestMapping("getpieChart") @ResponseBody public JsonResult getpieChart(){//取值 Integer[] idList = {1009,1010}; List<Integer> sid = new ArrayList<
SpringBoot+JPA
04-03
在SpringBoot中整合使用SpringDataJPA，完全快速上手开发，不再需要繁琐的文件配置
【19】SpringBoot+jpa+mysql的网上商城.zip
05-29
自己收集整理的一些JAVA代码Demo,阔以用于毕设什么的，项目思路还是不错的 用的IDEA
SpringBoot+JPA+LayUI商城系统源码.zip
10-20
SpringBoot+JPA+LayUI商城系统源码
springboot+JPA+thymeleaf开发的个人博客网站
05-04
简约的个人博客网站，代码有清晰的注释，后端采用springboot+JPA+thymeleaf模板，数据库采用mysql，前端UI采用semantic UI框架，开发工具采用IDEA，jdk版本为jdk8。整个网站包括两个大模块：前端展示和后端管理。...
SpringBoot+JPA.zip
10-29
包含springBoot+JPA的增删改查，含有条件查询，是学习springboot以及jpa入门的好demo
jpa单表递归树形结构实现
07-23
springJpa单标递归树形结构
echarts组织结构图及自定义右键菜单
12-27
echarts2.2.7实现组织结构图及自定义右键菜单。 使用方法:http://blog.csdn.net/xieedeni/article/details/78908402
springboot+echarts的树状图扇形图
weixin_44693727的博客
01-03 1041
1，用idea新建一个springboot项目，在pom.xml文件下加入依赖 <dependencies> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactI...
java树形结构生成工具
autumn_later的博客
06-30 1450
调用树形生成工具类，生成树形列表
java树形菜单实现 JPA实现树形菜单
Sigod
06-12 6466
基于springboot + JPA 方法一： 树结构： @Setter @Getter public class TreeNode<T> { @ApiModelProperty(value = "id", notes = "id") public Long id; @ApiModelProperty(value = "父ID", notes = "...
springBoot jpa创建树形结构数据库
weixin_47615289的博客
07-13 990
创建数据库表 数据库表的创建 @Entity @Table(name = “treeTable”) @Slf4j @Audited @Data public class TreeTable extends BaseModel implements Serializable { private String name;//省市名 private Long parentId;//代指父节点 @Override public boolean equals(Object o) { if (this == o) r
SpringData-jpa+Vue+highcharts绘制静态数据柱状图、饼图
weixin_43303530的博客
11-13 567
highcharts绘制静态数据柱状图、饼图： 实现最基本的数据柱状图、饼图 开发软件： 后台开发：Idea； 后台测试：Postman； 前端开发：VScod； 1、创建SpringBoot项目： 使用Idead点击file，选择New Project，选择Spring InitInitializr，自行配置项目的基础配置； 2、在pom.xml文件中导入依赖： <dependen...
echarts-----树状图(基础参数)
热门推荐
m0_46698214的博客
12-15 1万+
echarts-----树状图 首先echarts官网树状图示例展示展示 代码在官网示例图上都有，可以自行查阅，但该示例有个问题在于树状图的生成线都是弧线，而我们大部分需求都是折线 展示折线树状图，效果如下： 看了官网API参数控制，加上自己试验发现控制折线的参数是edgeShape 贴一下代码块： var data = { "name": "flare", "children": [ { "name": "data",
echarts实现树图-tree
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
09-18 2421
echarts实现图谱树
springboot+jpa restful
最新发布
01-25
在JPA的帮助下，我们可以使用简洁的注解来定义实体类和数据库之间的映射关系，同时也可以使用JPA提供的方法来进行数据库操作，例如查询、插入、更新和删除数据。 使用Spring Boot和JPA构建RESTful服务可以带来许多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值