ECharts 饼图 连接数据库 动态获取json数据

ECharts 饼图 连接数据库 动态获取json数据

ECharts 标准饼图 连接数据库 实现动态获取json数据

效果图如下：

实现步骤：

一、数据库搭建

CREATE TABLE `quyu` (
  `atype` varchar(220) DEFAULT NULL,
  `amount` int(20) DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1005 DEFAULT CHARSET=utf8;

二、创建一个springboot项目

1.配置pom.xml文件

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!-- 整合JSP -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

        <!--        引入MySQL相关依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.17</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </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>com.jayway.jsonpath</groupId>
            <artifactId>json-path</artifactId>
        </dependency>
    </dependencies>

2.配置application.yml文件

server:
  port: 8080
spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    cache: false
  datasource:
    url: jdbc:mysql://localhost:3306/自己的数据库?serverTimezone=GMT%2B8
    username: 自己的账号
    password: 自己的密码
    driver-class-name: com.mysql.cj.jdbc.Driver
#    配置页面扫描路径
  resources:
    static-locations: classpath:/templates/
mybatis:
  mapper-locations: classpath:/mapper/*.xml
  type-aliases-package: com.example.pojo

3.创建相应的文件目录

4.创建pojo层Region类

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Region {
    private String Atype;//物品
    private int Amount;//数量
}

5.创建service层RegionService接口

public interface RegionService {
    List<Region> findAll();
}

6.创建serviceImpl层RegionServiceImpl实现接口类

@Service
public class RegionServiceImpl implements RegionService {
    @Autowired
    RegionMapper regionMapper;
    @Override
    public List<Region> findAll() {
        return regionMapper.findAll();
    }
}

7.创建mapper层RegionMapper接口

@Mapper
public interface RegionMapper {
    List<Region> findAll();
}

8.创建resources–>mapper层RegionMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.RegionMapper">
<select id="findAll" resultType="com.example.pojo.Region">
    select Atype,Amount from quyu;
</select>
</mapper>

9.创建controller层ControllerChart类

@Controller
public class ControllerChart {
    @Autowired
    RegionServiceImpl regionService;
    @GetMapping("/k")
    @ResponseBody
    public List<Region> FindChart(){
        //直接返回查询出来的数据传给前端
        return regionService.findAll();
    }
}

10.创建templates层pie-chart.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存价值占比统计：饼状图</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:100%; height:400px;"></div>
<script type="text/javascript">
    window.onload = function pie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        //声明一个对象
        var list = [];
        var nus = [];
        $.ajax({
            async: true,            //异步请求
            data: {},
            //请求方式get
            type: "GET",
            //请求地址
            url: "http://localhost:8080/k",
            //数据，json字符串
            dataType: "json",
            //请求成功
            success: function (result) {
                console.log(result);
                //进行数据的遍历
                $.each(result, function (index, item) {
                    //添加数据到对象
                    //物品名
                    list.push(item.atype);
                    //物品名和数量
                    nus.push({
                        value: item.amount,
                        name: item.atype
                    });
                });
                console.log(list);
                console.log(nus);
                myChart.hideLoading();    //隐藏加载动画

                var option = {
                    title: {
                        text: '仓库物品',
                        left: 'center'
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                        // 计算占比%
                    },

                    legend: {                 //旁边的小标图
                        orient: 'vertical',
                        right: 10,
                        top: 300,
                        //添加物品名
                        data: list
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',     // 设置图表类型为饼图
                            radius: '55%',      //饼图的半径，外半径为可视区尺寸的长度。
                            // roseType: 'angle',           //设置图表类型为南丁格尔图
                            avoidLabelOverlap: false,
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(200, 0, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20

                            },
                            //添加物品名和数量   数据对照下面的格式
                            data: nus
                            // 数据数组，name 为数据项名称，value 为数据项值    格式
                            // { value: 335, name: '物品资产1' },
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };
</script>
</body>
</html>

11.运行项目

加油！！！