echarts+ajax动态获取后端数据

效果图：下面从前端和后端来讲解（如果有些地方描述的不是很好或者不够详细，可以留言交流）目录一前端1.1 引入js文件1.2 准备容器1.3 日期控件和按钮1.4 异步请求1.5 前端完整代码二、后端2.1 Controller层2.2 Service层一前端1.1 引入js文件<script src='../js/echart...

阿顾同学

39154人浏览 · 2018-08-20 20:53:58

阿顾同学 · 2018-08-20 20:53:58 发布

效果图：

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

一前端

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;
    }
}

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...