jsp页面整合ECharts绘制图表(以折线图为例)

最新推荐文章于 2024-04-03 16:57:37 发布

ClearZeroX

最新推荐文章于 2024-04-03 16:57:37 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： echarts ajax

本文链接：https://blog.csdn.net/neuqzlc/article/details/114578199

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

jsp页面整合ECharts绘制折线图

jsp页面整合ECharts绘制折线图

官网: https://echarts.apache.org/zh/index.html

官网上有demo可以直接调试样式。

话不多说, 直接上代码, 因为好久没写过jsp页面, 语法、用法啥的可能都比较糙, 主要参考整合ECharts的js代码部分, 我是为了方便调试, js直接放在了jsp页面中。

先看效果图

这个是下面 interval: 1 时的显示样式, x轴数据太多的话可以跳几个, 不全显示, 但是折线上会显示数据;

如果不需要跳, 不写或者写0。

前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:scroll">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${pageContext.request.contextPath}/app-resource/js/common/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/app-resource/js/common/jquery-3.3.1.min.js"></script>
    <title>坐席监控报表</title>
    <style type="text/css">
      
    </style>
</head>
<body>
<div>
    <h4>坐席监控报表</h4>
</div>
<div class="panel panel-default forie8"
     style="width: 100%; margin-bottom: 0px;">
    <div class="panel-body" style="padding-bottom: 0px;padding-top:10px">
        <form class="form-inline">
            <div class="form-group forie8" style="height: 50px;margin-left:28px">
                <%--这里是一些查询条件省略了, 主要看下面折线图部分--%>
            </div>
            <br>
        </form>
    </div>
</div>

<%--折线图--%>
<div id="main" class="col-md-12" style="width: 1200px; height: 500px; margin-top: 10px"></div>

<script type="text/javascript">
    // 注掉的部分是简单的理解和静态demo, 后面没注掉的部分是从后端动态获取数据展示
    // // 我的理解是(不一定对): 下面myChart、option相当于一个类以及属性;  下面myChart.setOption(option); 则是创建了一个实例对象使用
    // var myChart = echarts.init(document.getElementById('main'));
    // var option = {
    //     title: {
    //         text: '坐席数',
    //     },
    //     tooltip: {
    //         // 折线图上: 鼠标移动到每个点都会显示文本数据
    //         trigger: 'axis'
    //     },
    //     legend: {
    //         data: ['登录坐席数', '外呼坐席数']
    //     },
    //     // 工具栏: 可以转换为柱状图等等
    //     /*toolbox: {
    //         show: true,
    //         feature: {
    //             dataZoom: {},
    //             dataView: {readOnly: false},
    //             magicType: {type: ['line', 'bar']},
    //             restore: {},
    //             saveAsImage: {}
    //         }
    //     },*/
    //     xAxis: {
    //         // type: 'category',
    //         // x轴坐标从0开始显示
    //         boundaryGap: false,
    //         axisLabel: {
    //             // x轴坐标中间隔一个显示, 0则不隔, 下例则X轴只显示09、11、13点, 但是折线图上数据也会显示5个点的数据
    //             interval: 1,
    // 			  // x 轴太长显示不下时, 可以斜着显示 
    //             rotate: 40 
    //         },
    //         data: ['09:00', '10:00', '11:00', '12:00', '13:00']
    //     },
    //     yAxis: {},
    //     series: [
    //         {
    //             name: '登录坐席数',
    //             type: 'line',
    //             data: [1, 2, 3, 4, 5]
    //         },
    //         {
    //             name: '外呼坐席数',
    //             type: 'line',
    //             data: [4, 5, 2, 4, 9]
    //         }
    //     ]
    // };
    // 使用刚指定的配置项和数据显示图表
    // myChart.setOption(option);

    
    var contextPath = "${pageContext.request.contextPath}";

    // 下面是实际使用 queryData()方法调用时就可以显示折线图了
    function queryData(timeType, startTime) {
        $.ajax({
            type: "post",
            url: contextPath + "/report/agentMonitor/getAgentMonitorData",
            data: {'timeType': timeType},
            dataType: 'json',
            success: function (data) {
                //alert(JSON.stringify(data));
                var xData = data.xData;
                console.log("xData: " + xData);
                var yDataLogin = data.yDataLogin;
                console.log("yDataLogin: " + yDataLogin);
                var yDataOut = data.yDataOut;
                console.log("yDataOut: " + yDataOut);
                // 每次请求都重新搞一次
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '坐席数',
                    },
                    tooltip: {
                        // 折线图上: 鼠标移动到每个点都会显示文本数据
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['登录坐席数', '外呼坐席数']
                    },
                    xAxis: {
                        // type: 'category',
                        // x轴坐标从0开始显示
                        boundaryGap: false,
                        axisLabel: {
                            // x轴坐标中间隔一个显示, 0则不隔
                            interval: timeType === "3" ? 1 : 0
                        },
                        // 后端返回的横坐标
                        data: xData,
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '登录坐席数',
                            type: 'line',
                            // 后端返回的数据
                            data: yDataLogin
                        },
                        {
                            name: '外呼坐席数',
                            type: 'line',
                            data: yDataOut
                        }
                    ]
                };
                // 展示
                myChart.setOption(option);
                // 下面这个应该是清除原数据吧...
                window.onresize = function () {
                    myChart.resize();
                };
            },
            error: function (data) {
                //alert(data.status);
                 alert("error");
            }
        });
    }
</script>
</body>
</html>

后端测试代码

@ResponseBody
@RequestMapping("getAgentMonitorData")
public AgentMonitorPo getAgentMonitorData(String timeType, HttpServletRequest request, HttpServletResponse response) {
    AgentMonitorPo po = new AgentMonitorPo();
    if ("3".equals(timeType)) {
        po.setxData(new String[]{"10:00", "11:00", "12:00", "13:00", "14:00"});
        po.setyDataLogin(new int[]{8, 4, 7, 3, 6});
        po.setyDataOut(new int[]{5, 2, 6, 1, 4});
    } else {
        po.setxData(new String[]{"03-07", "03-08", "03-09", "03-10", "03-11"});
        po.setyDataLogin(new int[]{80, 40, 70, 30, 60});
        po.setyDataOut(new int[]{5, 20, 60, 10, 40});
    }
    return po;
}

public class AgentMonitorPo {

    // 折线图x轴坐标显示跨度
    private int myInterval;
    // x轴坐标显示
    private String[] xData;
    // y轴数据: 坐席登录数
    private int[] yDataLogin;
    // y轴数据: 坐席外呼数
    private int[] yDataOut;
    // 异常信息
    private String errMsg;
    
    ....省略get、set方法
}

ClearZeroX

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jsp页面整合ECharts绘制图表(以折线图为例)

文章目录jsp页面整合ECharts绘制折线图先看效果图前端代码后端测试代码jsp页面整合ECharts绘制折线图官网: https://echarts.apache.org/zh/index.html官网上有demo可以直接调试样式。话不多说, 直接上代码, 因为好久没写过jsp页面, 语法、用法啥的可能都比较糙, 主要参考整合ECharts的js代码部分, 我是为了方便调试, js直接放在了jsp页面中。先看效果图这个是下面 interval: 1 时的显示样式, x轴数据太多的话可以跳几
复制链接

扫一扫