SpringBoot+Freemarker+Echarts+Mysql+JPA实现数据库订单统计图表展示（饼状图，折线图，柱状图）

今天教大家做一个后台管理系统比较炫酷的统计页面，有饼状图，折线图和柱状图。
先把效果图给大家展示一下，折线图是可切换的


是不是还是挺好看的，那这样的统计图是如何实现的呢，我一步一步教给大家。

提前准备的额外的pom依赖

<dependency>
			<groupId>org.webjars.bower</groupId>
			<artifactId>echarts</artifactId>
			<version>4.0.4</version>
		</dependency>

<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.6</version>
		</dependency>

<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-freemarker</artifactId>
		</dependency>

如有其他需要，自行准备
配置文件yml，主要是数据库和模板引擎的配置

Spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    username: 
    password: 
    url: jdbc:mysql://localhost:3306/database?useUnicode=true&characterEncoding=utf8
  jpa:
    show-sql: true
    spring:
  freemarker:
    suffix: .ftl  #后缀名
    content-type: text/html
    enabled: true
    cache: false #缓存配置
    charset: UTF-8 #编码格式
    settings:
      number_format: '0.##'

第一步：创建springboot项目，这个我想大家都会就不展示了。
第二步：创建订单实体类，同样略过
第三步：封装展示统计结果的DTO

package com.jerry.gamemarket.dto;

import lombok.Data;

/**
 * author by 李兆杰
 * Date 2018/11/25
 */
@Data
public class StatisticMonthDTO {
    private Integer month;
    private Integer orderNum;
}

接下里去写DAO层，因为查询较为复杂，所以选择@Query注解，使用原生的sql语句

package com.jerry.gamemarket.dao;

import com.jerry.gamemarket.dto.StatisticOrderDTO;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

import java.util.List;

/*
* 订单主表DAO，数据资源库
* author by 李兆杰
* 2018-10-4
* */
public interface OrderMasterDao extends JpaRepository<OrderMaster,String>{
  @Query(value = "SELECT MONTH(create_time),COUNT(*) AS num FROM order_master where YEAR(create_time)=?1 GROUP BY MONTH(create_time) asc",nativeQuery = true)
    List<String> StatisOrderCountByMonth(Integer year);

}

接下来是Service层调用

package com.jerry.gamemarket.service;

import com.jerry.gamemarket.dto.StatisticMonthDTO;

import java.util.List;
import java.util.Map;

public interface OrderService {
//   统计月份订单数量
    List<StatisticMonthDTO> statisByMonth();
}

实现类，具体的import库自己引入就好了，这里的难点就是强制类型转换了，把返回的Object，set到封装的DTO里面去。

package com.jerry.gamemarket.service.Impl;
import com.jerry.gamemarket.dto.StatisticMonthDTO;
@Service
@Slf4j
public class OrderServiceImpl implements OrderService {
    @Autowired
    private OrderMasterDao orderMasterDao;
    @Override
    public List<StatisticMonthDTO> statisByMonth() {
        List<?> result=orderMasterDao.StatisOrderCountByMonth(2018);
        List<StatisticMonthDTO> statisticMonthDTOS =new ArrayList<>();
        for(int i=0;i<result.size();i++){
            StatisticMonthDTO statisticMonthDTO =new StatisticMonthDTO();
            Object[] obj = (Object[])result.get(i);
            statisticMonthDTO.setMonth(Integer.parseInt(obj[0].toString()));
            statisticMonthDTO.setOrderNum(Integer.parseInt(obj[1].toString()));
            statisticMonthDTOS.add(statisticMonthDTO);
        }
        return statisticMonthDTOS;
    }


}

然后是Controller层，这里解释一下就是，因为使用的是freemarker的模板引擎，所以我直接返回ModelAndView，在templates文件夹下面去建立order文件夹，把返回的页面放到这个文件夹下面，比如我返回的就是order下面的demo2.ftl。

package com.jerry.gamemarket.controller;

import com.jerry.gamemarket.dto.StatisticMonthDTO;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import javax.validation.Valid;
import java.util.List;
import java.util.Map;

/**
 * 卖家端商品
 * Created by 李兆杰 on 2018/11/21 0001.
 */
@Controller
@Slf4j
@RequestMapping("/seller/order")
public class SellerOrderController {

    @Autowired
    private OrderService orderService;
    @Autowired
    private OrderMasterDao orderMasterDao;
        @GetMapping(value="/orderStatistic")
        public ModelAndView echartsTest2(Map<String,Object> map){
            List<StatisticMonthDTO> months = orderService.statisByMonth();
            map.put("months",months);
            return new ModelAndView("order/demo2",map);
        }
}

然后就是去写页面引用Echarts了。通过EL表达式把数据渲染出来，万事大吉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;float: right;margin-left: 100px" ></div>
<div id="line" style="width: 600px;height:400px;margin-top: 100px" ></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
    var myChart2 = echarts.init(document.getElementById('line'));
    // 指定图表的配置项和数据
    var colors = ['#5793f3', '#d14a61', '#675bba'];


    var colors = ['#5793f3', '#d14a61', '#675bba'];


    var option = {
        title : {
            text: '每月订单销量全年占比',
            subtext: '订单销量占比饼状图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:[<#list months as month>
                "${month.month}",
            </#list>]
        },
        series : [
            {
                name: '订单数量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                <#list months as month>
                    {
                        value:
                    ${month.orderNum}
                        ,name:
                            "${month.month}"
                    },
                </#list>
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var option2 = {
        title: {
            text: '每月订单数量变化可切换统计图',
            subtext: '真实反映趋势'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['订单数量']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data : [<#list months as month>
                "${month.month}",
            </#list>],
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 单'
            }
        },
        series: [
            {
                name:'订单数量',
                type:'line',
                data:[<#list months as month>
                    "${month.orderNum}",
                </#list>],
                markPoint: {
                    data: [
                        {type: 'value'},

                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },

        ]
    };



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart2.setOption(option2);
</script>
</body>
</html>

相信大家都能做出好看的图表，echarts上面还有很多好玩的图标样式可以学习，最后就是有问题可以留言，谢谢阅读