商品订单的柱状图显示

最新推荐文章于 2022-03-25 09:37:40 发布

weixin_40214184

最新推荐文章于 2022-03-25 09:37:40 发布

阅读量718

点赞数

本文链接：https://blog.csdn.net/weixin_40214184/article/details/88737779

版权

实现的效果：

起初使用的方法：

1、页面代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>${setting.siteName} - 统计</title>
    <meta name="keywords" content="${setting.siteName}">
  	<meta name="description" content="${setting.siteName}">
  	<!-- BEGIN HEADER -->
		[#include "/admin/include/style.ftl"]
	<!-- END HEADER -->
</head>
<body  class="gray-bg">
<script type="text/javascript" src="${base}/resources/js/echarts.common.min.js"></script>
         <div class="ibox-title" >
            <a class="btn btn-outline btn-danger btn-xs"  onclick="exportExcl();"><i class="fa th-list"></i>导出excel</a>
        </div>
     <div id="container" style="height: 100%;margin: 0"></div>  
<script type="text/javascript">
var dom=document.getElementById("container");
var myChart=echarts.init(dom);
var app = {};
option = null;
var posList = [
               'left', 'right', 'top', 'bottom',
               'inside',
               'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
               'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
           ];

           app.configParameters = {
               rotate: {
                   min: -90,
                   max: 90
               },
               align: {
                   options: {
                       left: 'left',
                       center: 'center',
                       right: 'right'
                   }
               },
               verticalAlign: {
                   options: {
                       top: 'top',
                       middle: 'middle',
                       bottom: 'bottom'
                   }
               },
               position: {
                   options: echarts.util.reduce(posList, function (map, pos) {
                       map[pos] = pos;
                       return map;
                   }, {})
               },
               distance: {
                   min: 0,
                   max: 100
               }
           };

           app.config = {
               rotate:0,
               align: 'center',
               verticalAlign: 'bottom',
               position: 'insideTop',
               distance:0,
               onChange: function () {
                   var labelOption = {
                       normal: {
                           rotate: app.config.rotate,
                           align: app.config.align,
                           verticalAlign: app.config.verticalAlign,
                           position: app.config.position,
                           distance: app.config.distance
                       }
                   };
                   myChart.setOption({
                       series: [{
                           label: labelOption
                       }, {
                           label: labelOption
                       }, {
                           label: labelOption
                       }]
                   });
               }
           };


           var labelOption = {
               normal: {
                   show: true,
                   position: app.config.position,
                   distance: app.config.distance,
                   align: app.config.align,
                   verticalAlign: app.config.verticalAlign,
                   rotate: app.config.rotate,
                   formatter: '{c}',
                   fontSize: 16, 
                   rich: {
                       name: {
                           textBorderColor: '#fff'
                       }
                   }
               }
           };

           option = {
               color: ['#18a7ff', '#ffcf18', '#000'],
               tooltip: {
                   trigger: 'axis',
                   axisPointer: {
                       type: 'shadow'
                   }
               },
               legend: {
                   data: ['本日数量（个）', '本周数量（个）', '本月数量（个）']
               },
               toolbox: {
                   show: true,
                   orient: 'vertical',
                   left: 'right',
                   top: 'center',
                   feature: {
                       mark: {show: true},
                       dataView: {show: true, readOnly: false},
                       magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                       restore: {show: true},
                       saveAsImage: {show: true}
                   }
               },
               calculable: true,
               xAxis: [
                   {
                       type: 'category',
                       axisTick: {show: false},
                       data: ['代付款订单', '代发货订单', '待收货订单', '待评价订单', '已完成订单','已取消订单 ','仅退款订单','退货退款订单']
                   }
               ],
               yAxis: [
                   {
                       type: 'value'
                   }
               ],
               series: [
                   {
                	   name: '本日数量（个）',
                       type: 'bar',
                       barGap: 0,
                       label: labelOption,
                       data: ['${dayCountone}','${dayCounttwo}','${dayCountthree}','${dayCountfour}','${dayCountfive}','${dayCountsix}','${dayCountseven}','${dayCounteight}'] 
                   },
                   {
                	   name: '本周数量（个）',
                       type: 'bar',
                       label: labelOption,
                       data: ['${weekCountone}','${weekCounttwo}','${weekCountthree}','${weekCountfour}','${weekCountfive}','${weekCountsix}','${weekCountseven}','${weekCounteight}'] 
                   },
                   {
                	   name: '本月数量（个）',
                       type: 'bar',
                       label: labelOption,
                       data: ['${monthCountone}','${monthCounttwo}','${monthCountthree}','${monthCountfour}','${monthCountfive}','${monthCountsix}','${monthCountseven}','${monthCounteight}']
                   } 
               ]
           };
           if (option && typeof option === "object") {
        	    myChart.setOption(option, true);
        	}

           //导出excel表格
       function exportExcl(){
       		  window.location = "${base}/admin/torder/exportExcel.jhtml"; 
        }
   
</script>
</body>
</html>

后端的代码实现：

需要查出的是商品订单表中的类型字段（'订单状态（1-待支付2-待发货3-待收货4-待评价5-已完成6-已取消）'）在退货订单表中查询（type` int(4) DEFAULT NULL COMMENT '售后类型（1-仅退款2-退货退款）',）在统计图中显示。开始用的方法是一条一条的查询数据，然后添加到model中，页面中直接取出。。

controller层中的代码：


	/**
	 * 统计
	 * 
	 * @param model
	 * @return
	 */
	@RequestMapping(value = { "/statistics" }, method = { RequestMethod.GET })
	public String statistics(ModelMap model) {
		// 根据输入的状态查出数据（1-待支付2-待发货3-待收货4-待评价5-已完成6-已取消）
		// 获取天的
		Integer dayCountone = tOrderService.finddayCount(1);
		Integer dayCounttwo = tOrderService.finddayCount(2);
		Integer dayCountthree = tOrderService.finddayCount(3);
		Integer dayCountfour = tOrderService.finddayCount(4);
		Integer dayCountfive = tOrderService.finddayCount(5);
		Integer dayCountsix = tOrderService.finddayCount(6);
		Integer dayCountseven = afterOrderService.finddayTypeCount(1);
		Integer dayCounteight = afterOrderService.finddayTypeCount(2);
		// 获取周的
		Integer weekCountone = tOrderService.findweekCount(1);
		Integer weekCounttwo = tOrderService.findweekCount(2);
		Integer weekCountthree = tOrderService.findweekCount(3);
		Integer weekCountfour = tOrderService.findweekCount(4);
		Integer weekCountfive = tOrderService.findweekCount(5);
		Integer weekCountsix = tOrderService.findweekCount(6);
		Integer weekCountseven = afterOrderService.findweekTypeCount(1);
		Integer weekCounteight = afterOrderService.findweekTypeCount(2);
		// 获取月的
		Integer monthCountone = tOrderService.findmonthCount(1);
		Integer monthCounttwo = tOrderService.findmonthCount(2);
		Integer monthCountthree = tOrderService.findmonthCount(3);
		Integer monthCountfour = tOrderService.findmonthCount(4);
		Integer monthCountfive = tOrderService.findmonthCount(5);
		Integer monthCountsix = tOrderService.findmonthCount(6);
		Integer monthCountseven = afterOrderService.findmonthTypeCount(1);
		Integer monthCounteight = afterOrderService.findmonthTypeCount(2);

		model.addAttribute("dayCountone", dayCountone);
		model.addAttribute("dayCounttwo", dayCounttwo);
		model.addAttribute("dayCountthree", dayCountthree);
		model.addAttribute("dayCountfour", dayCountfour);
		model.addAttribute("dayCountfive", dayCountfive);
		model.addAttribute("dayCountsix", dayCountsix);
		model.addAttribute("dayCountseven", dayCountseven);
		model.addAttribute("dayCounteight", dayCounteight);
		model.addAttribute("weekCountone", weekCountone);
		model.addAttribute("weekCounttwo", weekCounttwo);
		model.addAttribute("weekCountthree", weekCountthree);
		model.addAttribute("weekCountfour", weekCountfour);
		model.addAttribute("weekCountfive", weekCountfive);
		model.addAttribute("weekCountsix", weekCountsix);
		model.addAttribute("weekCountseven", weekCountseven);
		model.addAttribute("weekCounteight", weekCounteight);
		model.addAttribute("monthCountone", monthCountone);
		model.addAttribute("monthCounttwo", monthCounttwo);
		model.addAttribute("monthCountthree", monthCountthree);
		model.addAttribute("monthCountfour", monthCountfour);
		model.addAttribute("monthCountfive", monthCountfive);
		model.addAttribute("monthCountsix", monthCountsix);
		model.addAttribute("monthCountseven", monthCountseven);
		model.addAttribute("monthCounteight", monthCounteight);
		return "/admin/torder/statistics";
	}

service层中的代码：

  service层：  
        public Integer finddayCount(int i);
		public Integer findweekCount(int i);
		public Integer findmonthCount(int i);

serviceimpl层：
       @Override
	public Integer finddayCount(int i) {
		return tOrderDao.finddayCount(i);
	}

	@Override
	public Integer findweekCount(int i) {
		return tOrderDao.findweekCount(i);
	}

	@Override
	public Integer findmonthCount(int i) {
		return tOrderDao.findmonthCount(i);
	}

dao层：

Integer finddayCount(int i);
		Integer findweekCount(int i);
		Integer findmonthCount(int i);

sql语句：

<!-- 统计当天的数据
    Integer finddayCount(int i); -->
	<select id="finddayCount" resultType="Integer">
	  SELECT
	count(*) AS sum
    FROM
	t_order e
    WHERE
	STATUS = #{STATUS}
   AND e.buy_time BETWEEN CURDATE()
   AND DATE_ADD(CURDATE(), INTERVAL 1 DAY) 
	</select>
	
	<!-- 统计本周的数据
	Integer findweekCount(int i); -->
	<select id="findweekCount" resultType="Integer">
	SELECT
	count(*) AS sum
   FROM
	t_order
     WHERE
     STATUS = #{STATUS}
     and
	YEARWEEK(
		date_format(buy_time, '%Y-%m-%d')
	) = YEARWEEK(now());
	
	
	</select>
	
	<!-- 统计本月的数据
	Integer findmonthCount(int i); -->
	<select id="findmonthCount" resultType="Integer">
	 SELECT
    count(*) AS sum
    FROM
	t_order
    WHERE
    STATUS = #{STATUS}
    and
	date_format(buy_time, '%Y-%m') = date_format(now(), '%Y-%m')
	
	</select>