后台管理系统搭建4 - ECharts 数据可视化

qq_1403034144

3512人浏览 · 2020-06-30 10:03:01

qq_1403034144 · 2020-06-30 10:03:01 发布

来源：https://www.bilibili.com/video/BV1ki4y147oK?p=4

上一节链接：https://blog.csdn.net/qq_40893824/article/details/106996441
下一节链接：https://blog.csdn.net/qq_40893824/article/details/107034720

源码：
https://github.com/13407196713/layui-springboot

插件下载

ECharts

思路来源：https://blog.csdn.net/weixin_42528089/article/details/95487734
1 下载做法：
搜索 ECharts

官网：https://echarts.apache.org/zh/download.html

JQuery

思路来源：https://blog.csdn.net/qq_40976321/article/details/90552297
下载网址：http://www.jq22.com/jquery-info122

如何使用

https://echarts.apache.org/zh/tutorial.html#5%20分钟上手%20ECharts

实例：https://echarts.apache.org/examples/zh/index.html

1 新建 1.hmtl，它和 echarts.min.js 在同一级目录

这样，下面的基本代码里 <script src="echarts.min.js"></script> 才会生效
基本代码：

<html>
	<head>
		<script src="echarts.min.js"></script>
	</head>
	
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		
		//这里写图片代码
		
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>

style="width: 600px;height:400px;" 是图片大小，没有的话，图片为 0，显示不出来

2

上图左边代码全部粘贴进下图红框处：

柱状图

后端数据修改成前端数据图表标准

1 echarts.min.js 和 1.html 复制进 layui-HBuilder_x

将其代码粘贴进 1.html 对应位置

2

上图 2 处红框处，想把它用柱状图表示
product_id 用对应对应汉字名字，这样就要关联查询

现在是集合里有1个名字、有 1 个数值，有很多个集合
可我需要一个集合全是名字，另一集合全是数值

3 vo 中，新建实体类 ProductBarVO
对应集合里有1个名字、有 1 个数值，有很多个集合

package com.southwind.layuispringboot.vo;

import lombok.Data;

@Data
public class ProductBarVO {
    private String name;
    private Integer count;
}

4 mapper/ ProductMapper 中，加入代码：

    @Select("select p.name, sum(quantity) count from order_detail od, product p where od.product_id = p.id group by product_id")
    public List<ProductBarVO> findAllProductBarVO();

5 test/ java/ com/ southwind/ layuispringboot/ mapper/ ProductMapperTest 中加入代码：

    @Test
    void test2(){
        List<ProductBarVO> list = mapper.findAllProductBarVO();
        int i = 0;
    }

在 int i = 0; 那里打断点，debug

是集合里有1个名字、有 1 个数值，有很多个集合
转换成：一个集合全是名字，另一集合全是数值！

6 vo 里新建实体类 BarVO

package com.southwind.layuispringboot.vo;

import lombok.Data;
import java.util.List;

@Data
public class BarVO {
    private List<String> names;
    private List<Integer> values;
}

7 service/ ProductService 中，加入 public BarVO getBarVO();：

8 service/ impl/ ProductServiceImpl 中，加入代码：

    @Override
    public BarVO getBarVO() {
        List<ProductBarVO> list = productMapper.findAllProductBarVO();
        List<String> names = new ArrayList<>();
        List<Integer> values = new ArrayList<>();
        for (ProductBarVO productBarVO : list) {
            names.add(productBarVO.getName());
            values.add(productBarVO.getCount());
        }
        BarVO barVO = new BarVO();
        barVO.setNames(names);
        barVO.setValues(values);
        return barVO;
    }

9 test/ java/ com/ southwind/ layuispringboot/ service/ ProductServiceTest 中，加入代码：

@Test
    void test(){
        BarVO barVO = service.getBarVO();
        int i = 0;
    }

在 int i = 0; 那里打断点，debug

一个集合全是名字，另一集合全是数值！
符合前端数据标准！

后台数据传到前端图表中

1 ProductController 中，加入代码：

    @RequestMapping("/barVO")
    @ResponseBody
    public BarVO getBarVO(){
        return productService.getBarVO();
    }

启动 LayuiSpringbootApplication，进入 http://localhost:8080/barVO

数据正确

2 jquery-3.5.1.min.js 粘贴进 layui-HBuilder_x
在 1.html 中，加入代码：
<script src="jquery-3.5.1.min.js"></script>

		$(function(){
			$.ajax({
				"url":"http://localhost:8080/barVO",
				"type":"POST",
				"success":function(data){
					
				}
			});
		})

$.ajax 的点很容易漏掉

下图，下边的红框处代码，要修改，再移进上边的红框

整合进 springboot

1 把 1.html 改名成 bar.html，在粘贴进springboot 的 resources/templates 中

2 echarts.min.js、jquery-3.5.1.min.js 粘贴进 resources/ static/ layui 中

3 springboot 中的 bar.html 中，url 改成 /barVO

4 重启 LayuiApplication，进入 http://localhost:8080/bar：

饼状图

其数据类型是 value、name
和 ProductBarVO 很像，数据类型一样，数据名不一致
若数据类型不一致就不行了，要另写实体类了
现在不用新写 vo 实体类

后端数据改成前端数据图表标准

1 在 ProductBarVO 中，加上 @JsonProperty("value")：

2 另写 1 个 vo 实体类也行！
在 vo 中，新建实体类 PieVO，加入代码：

package com.southwind.layuispringboot.vo;

import lombok.Data;

@Data
@AllArgsConstructor
public class PieVO {
    private Integer value;
    private String name;
}

3 ProductService 中，加上 public List<PieVO> getPieVO();：

4 ProductServiceImpl 中，加入代码：

    @Override
    public List<PieVO> getPieVO() {
        List<ProductBarVO> list = productMapper.findAllProductBarVO();
        List<PieVO> pieVOList = list.stream()
                .map(e -> new PieVO(
                        e.getCount(),
                        e.getName()
                )).collect(Collectors.toList());
        return pieVOList;
    }

后台数据传到前端图表中

5 ProductController 中，加入代码：

    @RequestMapping("/pieVO")
    @ResponseBody
    public List<PieVO> getPieVO(){
        return productService.getPieVO();
    }

6 重启 LayuiSpringbootApplication，进入 http://localhost:8080/pieVO：

是预期数据形式

7 在 layui-HBuilder_x 中，复制粘贴 1 份 bar.html，改名为 pie.html，下图代码红框处改为饼状图代码

下图 2 处红框处代码要改

改为：

运行到浏览器：http://127.0.0.1:8848/layui-HBuilder_x/pie.html

视频中，是红色的，我本地运行是黑色的
因为数据较小就偏黑色，数据较大就偏白

8 之前数据用的是 PieVO 的实体来，现在用 ProductBarVO
在 ProductController 中，注释掉之前的 getPieVO() 方法，加入：

    @Autowired
    private ProductMapper productMapper;

    @RequestMapping("/pieVO")
    @ResponseBody
    public List<ProductBarVO> getPieVO(){
        return productMapper.findAllProductBarVO();
    }

9 重启 LayuiSpringbootApplication，进入 http://localhost:8080/pieVO：

是预期数据形式

10 在 layui-HBuilder_x 中运行：

整合进 springboot

1 layui-HBuilder_x 中，pie.html 粘贴进 springboot/ resources/ templates 中，修改成：

2 重启 LayuiSpringbootApplication，进入 http://localhost:8080/pieVO：

上一节链接：https://blog.csdn.net/qq_40893824/article/details/106996441
下一节链接：https://blog.csdn.net/qq_40893824/article/details/107034720

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git