springboot整合echarts的树状图和饼状图

最新推荐文章于 2023-02-05 13:54:39 发布

SunsgneLM

最新推荐文章于 2023-02-05 13:54:39 发布

阅读量1k

点赞数 2

分类专栏： springboot树状图和饼状图文章标签： js spring boot html

原文链接：https://blog.youkuaiyun.com/Gfz80k/article/details/103051669

版权

springboot树状图和饼状图专栏收录该内容

1 篇文章

订阅专栏

1、idea创建springboot项目，看图文指引。
这篇博客是参考另一篇博客的文章做的，有些改动。
博客地址：参考文章
在这里插入图片描述
一直到这个地方，看图中所选择。

2、创建完之后，加入下列依赖。可以吧自己本来的都删掉。
新手注意，是全部添加到标签的里面。

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</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.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>
        <version>5.1.40</version>
    </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>

然后把application.properties文件改成application.yml
里面放入如下代码。

spring:
  thymeleaf:
    prefix: classpath:/templates/ #th模板运行路径
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    cache: false

  resources:
    chain:
      strategy:
        content:
          enabled: true
          paths: /**
    static-locations: classpath:/templates/ #页面运行路径
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/nei1?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    password: liumei520
    username: root
server:
  port: 8080

password:这里是密码
username:这里是数据库用户名
3306/这里是数据库
3、接下来大家按我图片新建后台的包

在这里插入图片描述
然后附上后台代码，自行copy，爆红现象Alt+回车自己导包。
entity实体类代码：
Table1

package com.xitao.tubiao3.entity;

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;

}

Table2

package com.xitao.tubiao3.entity;

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;

}

mapper包代码：
Table1Mapper接口

package com.xitao.tubiao3.mapper;

import com.xitao.tubiao3.entity.Table1;
import org.springframework.data.jpa.repository.JpaRepository;

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

Table2Mapper接口

package com.xitao.tubiao3.mapper;

import com.xitao.tubiao3.entity.Table2;
import org.springframework.data.jpa.repository.JpaRepository;

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

service包：
在这里插入图片描述
Table1Service接口

package com.xitao.tubiao3.service;

import com.xitao.tubiao3.entity.Table1;

import java.util.List;

public interface Table1Service {
    public List<Table1> cha1();
}

Table2Service接口

package com.xitao.tubiao3.service;

import com.xitao.tubiao3.entity.Table2;

import java.util.List;

public interface Table2Service {
    public List<Table2> cha2();
}

Table1ServiceImpl类

package com.xitao.tubiao3.service.impl;

import com.xitao.tubiao3.entity.Table1;
import com.xitao.tubiao3.mapper.Table1Mapper;
import com.xitao.tubiao3.service.Table1Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.transaction.Transactional;
import java.util.List;

@Service
@Transactional
public class Table1ServiceImpl implements Table1Service {
    @Autowired
    private Table1Mapper table1Mapper;

    @Override
    public List<Table1> cha1() {
        return table1Mapper.findAll();
    }

}

Table2ServiceImpl类

package com.xitao.tubiao3.service.impl;

import com.xitao.tubiao3.entity.Table2;
import com.xitao.tubiao3.mapper.Table2Mapper;
import com.xitao.tubiao3.service.Table2Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.transaction.Transactional;
import java.util.List;

@Service
@Transactional
public class Table2ServiceImpl implements Table2Service {
    @Autowired
    private Table2Mapper table2Mapper;

    @Override
    public List<Table2> cha2() {
        return table2Mapper.findAll();
    }
}

controller包：
Table1Controller类

package com.xitao.tubiao3.controller;

import com.xitao.tubiao3.entity.Table1;
import com.xitao.tubiao3.service.impl.Table1ServiceImpl;
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 Table1Controller {
    @Resource
    private Table1ServiceImpl table1Service;
    @RequestMapping("/firstApi")
    public List<Table1> findAll(){
        return table1Service.cha1();
    }
}

Table2Controller类

package com.xitao.tubiao3.controller;

import com.xitao.tubiao3.entity.Table2;
import com.xitao.tubiao3.service.impl.Table2ServiceImpl;
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 Table2Contoller {
    @Resource
    private Table2ServiceImpl table2Service;
    @RequestMapping("/lastApi")
    public List<Table2> findAll(){
        return table2Service.cha2();
    }
}

4、前端，在resources资源文件夹里面新建templates文件夹
在这里插入图片描述
附上前端页面代码：
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) {
            arr1.push(item.name);
            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">
    $(function(){
        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>

5、运行查看效果。
demo.html
在这里插入图片描述
test.html

浏览器路径就是http://localhost:8080/加上页面路径