效果图：

下面从前端和后端来讲解（如果有些地方描述的不是很好或者不够详细，可以留言交流）

一前端

一前端

1.1 引入js文件

<script src='../js/echarts.js'></script>
<script src="../js/jquery-1.8.3.min.js"></script>

1.2 准备容器

<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div id='main' style='width: 90%;height:400px;' align="center"></div>

1.3 日期控件和按钮

<div align="center">
    <label for="start">开始日期：</label><input id="start" type="date" value="2018-08-13"/>
    <label for="end">结束日期：</label><input id="end" type="date" value="2018-08-16"/>
    //调用getData方法
    <button onclick="getData()">查询</button>
</div>

1.4 异步请求

下面有三个方法，点击button后执行顺序如下：

1.先执行getData()方法，此方法内部含有异步请求

2.请求的数据回来后，执行generateChart(data)方法

3.执行到纵轴读取数据的时候，又去执行dataToFixed(data)方法，主要为了处理小数点（保留两位小数）因为后台返回的是Map数据，例子如下【数据会随着日期的选择而变化】：


<script>
    //将集合中的数据保留两位小数
    function dataToFixed(data) {
        var seriesData = [];
        for (var i = 0; i < data.seriesSaleList.length; i++) {
            //将销量保留两位小数
            var temp = data.seriesSaleList[i].toFixed(2);
            seriesData.push(temp);
        }
        return seriesData;
    }

    //生成图标的方法
    function generateChart(data) {
        //基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //指定图表的配置项和数据
        myChart.clear();
        var option = {
            title: {
                text: '销售额曲线图'
            },
            //提示框组件
            tooltip: {
                //坐标轴触发，主要用于柱状图，折线图等
                trigger: 'axis'
            },
            //数据全部显示
            axisLabel: {
                interval: 0
            },
            //图例
            legend: {
                data: ['销售额']
            },
            //横轴
            xAxis: {
                data: data.xAxisList
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    name: '销售额',
                    //折线图
                    type: 'line',
                    data: dataToFixed(data)//处理小数点数据
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }

    //buttion调用的方法
    function getData() {
        var start = $('#start').val();
        var end = $('#end').val();
        //异步请求
        $.post(
            "../ordersale/guFindEchartsData.do",//访问地址
            {start: start, end: end},//携带的参数
            function (data) {
                generateChart(data);
            },
            "json"
        );
    }
</script>

1.5 前端完整代码

下面代码拷贝时，注意修改的地方：

1.引入的js文件路径

2.异步请求的访问路径

3.返回的Map的key的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts入门</title>
</head>
<body>
<!-- 引入ECharts和JQuery文件 -->
<script src='../js/echarts.js'></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
    //将集合中的数据保留两位小数
    function dataToFixed(data) {
        var seriesData = [];
        for (var i = 0; i < data.seriesSaleList.length; i++) {
            //将销量保留两位小数
            var temp = data.seriesSaleList[i].toFixed(2);
            seriesData.push(temp);
        }
        return seriesData;
    }
    //生成图标的方法
    function generateChart(data) {
        //基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //指定图表的配置项和数据
        myChart.clear();
        var option = {
            title: {
                text: '销售额曲线图'
            },
            //提示框组件
            tooltip: {
                //坐标轴触发，主要用于柱状图，折线图等
                trigger: 'axis'
            },
            //数据全部显示
            axisLabel: {
                interval: 0
            },
            //图例
            legend: {
                data: ['销售额']
            },
            //横轴
            xAxis: {
                data: data.xAxisList
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    name: '销售额',
                    //折线图
                    type: 'line',
                    data: dataToFixed(data)//处理小数点数据
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }
    //buttion调用的方法
    function getData() {
        var start = $('#start').val();
        var end = $('#end').val();
        //异步请求
        $.post(
            "../ordersale/guFindEchartsData.do",//访问地址
            {start: start, end: end},//携带的参数
            function (data) {
                generateChart(data);
            },
            "json"
        );
    }
</script>
<div align="center">
    <label for="start">开始日期：</label><input id="start" type="date" value="2018-08-13"/>
    <label for="end">结束日期：</label><input id="end" type="date" value="2018-08-16"/>
    <button onclick="getData()">查询</button>
</div>
<hr>
<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div id='main' style='width: 90%;height:400px;' align="center"></div>
</body>
</html>

二、后端

各位童鞋，由于后端采用的是分布式开发的，这里只陈列一下核心代码，主要的思想就是给前台返回一个Map<String,List>的数据结构，后端可以根据自己特定的处理方式进行开发，也可以参考下面的代码

2.1 Controller层

下面代码中，saleDataMap的数据结构是下面的格式

{2018-08-20=600.0, 2018-08-18=2579.9700000000003, 2018-08-19=6962.71, 2018-08-15=179.76, 2018-08-16=1221.0700000000002, 2018-08-17=8.0}

思路就是：先将上面的map按照key(日期)排序，然后再转换成下面的格式，再返回到前端

{"xAxisList":["2018-08-15","2018-08-16","2018-08-17","2018-08-18","2018-08-19","2018-08-20"],"seriesSaleList":[179.76,1221.0700000000002,8.0,2579.9700000000003,6962.71,600.0]}


@RestController
@RequestMapping("/ordersale")
public class OrderSaleController {

    @Reference
    private OrderService orderService;

    @RequestMapping("/guFindEchartsData")
    public Map<String, List> guFindData(String start, String end) {
        Map<String, List> map = new HashMap<String, List>();
        //获取商家登录id
        String sellerId = SecurityContextHolder.getContext().getAuthentication().getName();
        //查询销售额信息
        Map<String, Double> saleDataMap = orderService.findSaleData(start, end, sellerId);
        //将map按照key排序
        saleDataMap = sortMapByKey1(saleDataMap, true);

        //用来封装日期
        ArrayList<String> xAxisList = new ArrayList<>();
        //用来封装销售额
        ArrayList<Double> seriesSaleList = new ArrayList<>();
        //遍历数据，封装到新的map中
        Set<String> keySet = saleDataMap.keySet();
        for (String key : keySet) {
            //添加日期
            xAxisList.add(key);
            //添加销售额
            seriesSaleList.add(saleDataMap.get(key));
        }
        map.put("xAxisList", xAxisList);
        map.put("seriesSaleList",seriesSaleList);
        return map;
    }
    //将map按照key进行排序
    public static Map<String, Double> sortMapByKey1(Map<String, Double> oriMap, final boolean isRise) {
        if (oriMap == null || oriMap.isEmpty()) {
            return null;
        }
        Map<String, Double> sortMap = new TreeMap<>(new Comparator<String>() {
            @Override
            public int compare(String o1, String o2) {
                if (isRise) {
                    // 升序排序
                    return o1.compareTo(o2);
                } else {
                    // 降序排序
                    return o2.compareTo(o1);
                }
            }
        });
        sortMap.putAll(oriMap);
        return sortMap;
    }

}

2.2 Service层


@Service
@Transactional
public class OrderServiceImpl implements OrderService {

    @Autowired
    private TbOrderMapper orderMapper;

    @Autowired
    private TbOrderItemMapper orderItemMapper;

    @Override
    public Map<String, Double> findSaleData(String start, String end, String sellerId) {
        Map<String, Double> map = new HashMap();
        try {
            //根据用户名，开始时间，结束时间查询订单
            TbOrderExample example = new TbOrderExample();
            Criteria criteria = example.createCriteria();
            //将String 转换成Date
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
            Date dateStart = dateFormat.parse(start);
            Date dateEnd = dateFormat.parse(end);
            //添加日期查询条件
            criteria.andPaymentTimeBetween(dateStart, dateEnd);
            //添加商家id查询条件
            criteria.andSellerIdEqualTo(sellerId);
            List<TbOrder> orderList = orderMapper.selectByExample(example);
            //确保有数据再去订单明细表里查询数量
            if (orderList != null && orderList.size() > 0) {
                //遍历订单集合，查询每个订单的销售数量
                for (TbOrder order : orderList) {
                    Date paymentTime = order.getPaymentTime();
                    //Date换成String
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                    String dateStr = sdf.format(paymentTime);
                    //获取支付金额
                    BigDecimal payment = order.getPayment();
                    if(map.containsKey(dateStr)){
                        //累加销售额
                        map.put(dateStr,payment.doubleValue()+map.get(dateStr));
                    }else {
                        map.put(dateStr,payment.doubleValue());
                    }
                }
            } else {
                return new HashMap();
            }

        } catch (ParseException e) {
            e.printStackTrace();
            return new HashMap();
        }
        System.out.println(map);
        return map;
    }
}

echarts+ajax动态获取后端数据

一前端

1.1 引入js文件

1.2 准备容器

1.3 日期控件和按钮

1.4 异步请求

1.5 前端完整代码

二、后端

2.1 Controller层

2.2 Service层

猜你喜欢

echarts+ajax动态获取后端数据

一 前端

1.1 引入js文件

1.2 准备容器

1.3 日期控件和按钮

1.4 异步请求

1.5 前端完整代码

二、后端

2.1 Controller层

2.2 Service层

猜你喜欢

一前端