SSM+echart实现销售视图

在开发SSM网上书城的过程中,博主想让该项目的订单查看页面更加直观,因此便想到了使用视图进行显示,博主使用了一个前端插件echart,我们要做的就是将查询的结果放入相应接口中,效果图如下:
在这里插入图片描述
博主设计了四个视图,用到了折线图,柱状图,饼状图三种视图类型,下面便以饼状图为例给大家介绍下具体实现
首先我们找到echart对饼状图的介绍以及实现代码
在这里插入图片描述

demo解析

<div id="main" style="width: 500px; height: 360px;"></div>//盛放视图的盒子
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [//我们传入的数据
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);

那么看懂了以上方法后,我们便可以进行调用了
饼状图盛放的盒子
html代码

<div id="pieview" style="width: 500px; height: 360px;"></div>

我们对生成视图与请求数据的前端代码进行了封装
JavaScript代码

function pieview(){
	var chartDom = document.getElementById('pieview');
	var myChart = echarts.init(chartDom);
	var option;//我们使用ajax进行请求数据
	$.ajax({
		type : "get",
		url : "goodview.action", //请求链接
		dataType : "json", //返回数据形式为json
		success : function(result) {
			//请求成功时执行该函数内容,result即为服务器返回的json对象
			 var servicedata=[];//根据上面分析可知,其传入的数据是json的格式,那么我们获取到的数据也要是相同格式
             for(var i=0;i<result.length;i++){//将获取的json内容进行拆分
                 var obj=new Object();
                 obj.name=result[i].gid; //获取商品名称
                 obj.value=result[i].price;//获取销售额
                 servicedata[i]=obj;
             }
	option = {
	    title: {
	        text: '网上书城销售额/元',
	        subtext: '仅供参考',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item'
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	    },
	    series: [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius: '50%',
	            data: servicedata, //将我们的数据替换原来的静态数据
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};

	option && myChart.setOption(option);}});
}

至此,echart的接口封装部分便完成了,接下来便是数据请求了
博主的后端使用的是SSM,现在介绍下数据请求过程
使用ajax发送数据请求后,我们进入Controller

	@RequestMapping(value="/goodview")
	@ResponseBody//用于转换为json
	public  List<Orders> goodview(){
		List<Orders> list= os.goodView();//调用服务层查询
		return list;	
	}

服务层代码

@Override
	public List<Orders> goodView() {
		// TODO Auto-generated method stub
		return om.goodView();//调用dao层的OrderMapper接口进而调用mybatis的方法
	}
<?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="dao.OrderMapper">
	<select id="goodView" resultType="domain.Orders">
	select goods.gname as
	gid,SUM(goods.price*orders.sum)as price from orders 
	inner join goods on
	orders.gid=goods.id group by goods.gname
	</select>
</mapper>

sql语句的实现效果:
在这里插入图片描述

我们通过三表联立查询将我们的数据查询结果进行返回。
至此,我们的echart饼状图便实现了
其余的视图实现方法也是如法炮制,便不一 一赘述了。
码字不易,给个赞呗!

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彭祥.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值