Springboot+html+Echarts

使用Echarts创建树状图和饼状图

先创建Springboot项目不要选择如何插件，创建项目后直接测试运行项目看能不能运行！

（1）创建数据库jpademo
创建数据表table1

创建数据表table2

然后创建文件夹pojo、service、dao、controller文件夹
table1实体类

package com.example.ss.pojo;

import lombok.Data;

import javax.persistence.*;


@Data
@Entity
@Table(name = "Table1")
public class Table1 implements java.io.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

package com.example.ss.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;

}

导入数据库配置信息

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

  resources:
    chain:
      strategy:
        content:
          enabled: true
          paths: /**
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/jpademo?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    password: root
    username: root

配置application.yml

 <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.10</version>
        </dependency>
    </dependencies>

Table1Dao

public interface Table1Dao extends JpaRepository<Table1,Integer> {
}

Table2Dao

public interface Table2Dao extends JpaRepository<Table2,Integer> {
}

Table1Service

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

Table2Service

@Service
@Transactional
public class Table2Service {
    @Autowired
    Table2Dao table2Dao;

    public List<Table2> findAll() {
        return table2Dao.findAll();
    }
}

HelloSpringBoot

@RestController
public class HelloSpringBoot {

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

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

    }

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

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

    }
}

Table1Controller

@RestController
public class Table1Controller {

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

Table2Controller

import java.util.List;

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

下载echarts插件
地址:https://www.echartsjs.com/zh/builder.html

然后在resources文件夹下创建static.js文件夹
将echarts.min.js文件加入到static下

然后再创建templates文件夹下创建demo.html、test.html

demo.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.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 src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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>

test.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.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 src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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>

然后直接运行效果如下：
树状图

饼状图