springboot+echarts的树状图扇形图

1，用idea新建一个springboot项目，在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.10</version>
        </dependency>
    </dependencies>

2.在yml配置文件中配置如下信息

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
server:
  port: 8787

3.下载echarts插件

地址:https://www.echartsjs.com/zh/download.html
注：也可以不用下载，用到的时候直接联网访问：https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js

4.后台controller

package com.pict.picture.controller;

import org.springframework.web.bind.annotation.GetMapping;
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 ChartsController {
    @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名字一样，返回这个界面
    }
}

package com.pict.picture.controller;

import com.pict.picture.pojo.charts;
import com.pict.picture.pojo.game;
import com.pict.picture.service.GameService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
public class GameController {
    @Resource
    GameService gameService;
    @RequestMapping("/lastApi")
    public List<game> findAll(){
        return gameService.findAll();
    }
}

package com.pict.picture.controller;

import com.pict.picture.pojo.charts;
import com.pict.picture.service.ChartsService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
public class TestController {
    @Resource
    ChartsService chartsService;
    @RequestMapping("/firstApi")
    public List<charts> findAll(){
        return chartsService.findAll();
    }
}

5.前台页面代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>111</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>
<a>111</a>
<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>

最后附上运行图：