SSM+echart实现销售视图

怼烎@ 2022-10-11 03:57 114阅读 0赞

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

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代码

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

至此，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语句的实现效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221005/823821ecc9114cddb08159287eec7acc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]: /images/20221005/710574db983847c0aeb4dd764fe25dc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]: /images/20221005/82b9522ae3f547baa295d7354efa43c1.png