使用Echarts+springBoot连接数据库实现简单树状图和饼状图

最新推荐文章于 2024-04-22 07:35:41 发布

自闭少年怪咖

最新推荐文章于 2024-04-22 07:35:41 发布

阅读量1.9k

点赞数 5

文章标签： echarts 前端 javascript spring boot mybatis

本文链接：https://blog.csdn.net/hdagujd/article/details/128097061

版权

一、效果展示

1.树状图

2.饼状图

二、数据库

三、pom.xml文件

<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>

四、后端代码

1.项目结构

2.实体类

table1:


@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;

}

table2类似上面一样的

3.controller层

table1Controller

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

table2Controller

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

@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");
    }

    @RequestMapping(value="/courseClickCount",method = RequestMethod.GET)
    public ModelAndView courseClickCountStat(){
        return new ModelAndView("demo");
    }
}

4.service层

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

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

5.dao层

都实现了jpa接口,第一个属性是实体类,第二个传入的是数据库主键的类型

五、后端代码实现

树状图页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
<!--  引入jquery-->
  <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>

到此springboot整合echarts完成！