前端如何以图表的形式展示后台的数据

最新推荐文章于 2024-06-26 17:22:21 发布

前端交互仔

最新推荐文章于 2024-06-26 17:22:21 发布

阅读量4.3k

点赞数 4

分类专栏： Layui

本文链接：https://blog.csdn.net/liulang68/article/details/108739486

版权

Layui 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

把商品的购买数量排列下来(quantity)

而且我们需要把(product_id)进行合并，因为表示的是同一个商品。

在这里插入图片描述

这里我们给的是商品的名称，但是上面的那个表格没有，所以我们这里要使用多表关联查询
order_detail里面的product_id对应的就是product里面的id

后台开始写项目和前端对接

后端首先要创建一个实体类和要传递给前端的数据进行对应。
在这里插入图片描述

在这里插入图片描述这里我们是创建了两个集合(这个集合是属于纵向的)

在这里插入图片描述这个泛型我们发现没有写order_detail的实体类，这个是没关系的，我们写Product这个实体类是让mybaits-plus自动和数据库进行关联，形成查询语句的映射，这里我们已经写了注解(自定义的sql查询语句)
这个集合我们还不能直接返回到前端，因为这里的集合是横向的，前端要的是纵向的。

[ProductBarVO(name=啫喱水, count=37), ProductBarVO(name=润肤露, count=10), ProductBarVO(name=洁面装, count=66), ProductBarVO(name=电饭锅, count=6), ProductBarVO(name=荣耀3C, count=3), ProductBarVO(name=联想Y系列, count=100), ProductBarVO(name=红短沙发, count=10)]

接下来的目的我们就是把它分成两个集合(把ProductVO转成BarVO)
在这里插入图片描述
这里是测试了一下

得到的结果

BarVO(names=[啫喱水, 润肤露, 洁面装, 电饭锅, 荣耀3C, 联想Y系列, 红短沙发], values=[37, 10, 66, 6, 3, 100, 10])

现在我们要做的就是把BarVO对象传到前端。

service层相当于注入了mapper层然后就可以查询数据库的方法

@RequestMapping 可以接收到任何的请求。

在这里插入图片描述

在这里插入图片描述
这里使用jquery的目的就是为了实现ajax交互。

在这里插入图片描述如何可以弹出来说明jquery的环境是ok的。
接下来我们就是在jquery里面发ajax请求

在这里插入图片描述不需要传参的我们直接写success，直接写回调。
data指的就是它返回的数据(这个data是在回调里面出了回调就失去它的作用域了)
所以我们要把内容全部写在回调里面

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="layui/jquery-1.8.3.min.js"></script>
	<script src="layui/echarts.min.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		
		$(function(){
			$.ajax({
				"url":"/barVO",
				"type":"POST",
				"success":function(data){
					console.log(data.names)
					console.log(data.values)
					
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));
					
					// 指定图表的配置项和数据
					var option = {
					    xAxis: {
					        type: 'category',
					        data: data.names
					    },
					    yAxis: {
					        type: 'value'
					    },
					    series: [{
					        data: data.values,
					        type: 'bar'
					    }]
					};
					
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
					
				}
			});
		})
		
        
    </script>
</body>
</html>

接下来我们看下使用饼图来展示后端的数据
在这里插入图片描述这里是为了实现获取对象以后重新赋值给PieVO,因为ProductBarVO里面的属性值和PieVO的属性值不同。

这里我们也可以不写PieVO,直接使用ProductVO这个实体类

在这里插入图片描述但是我们会发现返回count的时候，数据不会显示。

代码地址：https://www.lanzoux.com/b015sadjc
密码:c297

前端交互仔

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
前端如何以图表的形式展示后台的数据

把商品的购买数量排列下来(quantity)而且我们需要把(product_id)进行合并，因为表示的是同一个商品。这里我们给的是商品的名称，但是上面的那个表格没有，所以我们这里要使用多表关联查询order_detail里面的product_id对应的就是product里面的id...
复制链接

扫一扫

专栏目录