尚硅谷大数据技术之电信客服

发布时间:2018年11月09日作者:yafei浏览次数:860

9) 新建:queryContact.jsp

<%–

  Created by IntelliJ IDEA.

  User: Z

  Date: 2017/10/28

  Time: 10:36

  To change this template use File | Settings | File Templates.

–%>

<%@ page contentType=”text/html;charset=UTF-8″ language=”java” isELIgnored = “false” %>

<html>

<head>

    <title>查询联系人</title>

</head>

<body>

查询结果:<br/>

<h1>${requestScope.contacts}</h1>

</body>

</html>

10) 新建:callLogList.jsp

<%–

  Created by IntelliJ IDEA.

  User: Z

  Date: 2017/10/28

  Time: 14:36

  To change this template use File | Settings | File Templates.

–%>

<%@ page contentType=”text/html;charset=UTF-8″ language=”java” isELIgnored = “false” %>

<html>

<head>

    <title>显示通话记录</title>

</head>

<body>

查询结果:<br/>

<h1>${requestScope.callLogList}</h1>

</body>

</html>

11) 新建:callLogListEchart.jsp

<%–

  Created by IntelliJ IDEA.

  User: Z

  Date: 2017/10/28

  Time: 14:36

  To change this template use File | Settings | File Templates.

–%>

<%@ page contentType=”text/html;charset=UTF-8″ language=”java” isELIgnored=”false” %>

<html>

<head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

    <title>显示通话记录</title>

    <script type=”text/javascript” src=”../js/echarts.min.js”></script>

    <%–<script type=”text/javascript” src=”${pageContext.request.contextPath}/js/echarts.min.js”></script>–%>

    <%–<script type=”text/javascript” src=”${pageContext.request.contextPath}/jquery-3.2.0.min.js”></script>–%>

    <%–<script type=”text/javascript” src=”http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js”></script>–%>

</head>

<body style=”height: 100%; margin: 0″>

<div id=”container1″ style=”height: 100%; width: 50%; float:left”; m></div>

<div id=”container2″ style=”height: 100%; width: 50%; float:right”></div>

<script type=”text/javascript”>

    var telephone = “${requestScope.telephone}”

    var name = “${requestScope.name}”

 

    var date = “${requestScope.date}”

    var count = “${requestScope.count}”

 

    var duration = “${requestScope.duration}”

    callog1();

    callog2();

 

    function callog1() {

        var dom = document.getElementById(“container1”);

        var myChart = echarts.init(dom);

        myChart.showLoading();

        var option = {

            title: {

                text: ‘通话记录查询人:’ + name,

                textStyle: {

                    //文字颜色

                    color: ‘#2c2c2c’,

                    //字体风格,’normal’,’italic’,’oblique’

                    fontStyle: ‘normal’,

                    //字体粗细 ‘normal’,’bold’,’bolder’,’lighter’,100 | 200 | 300 | 400…

                    fontWeight: ‘bold’,

                    //字体系列

                    fontFamily: ‘sans-serif’,

                    //字体大小

                    fontSize: 20

                },

                itemGap: 12,

                subtext: ‘手机号码:’ + telephone,

                subtextStyle: {

                    //文字颜色

                    color: ‘#2c2c2c’,

                    //字体风格,’normal’,’italic’,’oblique’

                    fontStyle: ‘normal’,

                    //字体粗细 ‘normal’,’bold’,’bolder’,’lighter’,100 | 200 | 300 | 400…

                    fontWeight: ‘bold’,

                    //字体系列

                    fontFamily: ‘sans-serif’,

                    //字体大小

                    fontSize: 18

                }

            },

            grid:{

                x:100,

                y:100,

                borderWidth:1

            },

            tooltip: {

                trigger: ‘axis’

            },

            legend: {

                data: [‘通话次数’, ‘通话时长’]

            },

            toolbox: {

                show: true,

                feature: {

                    dataZoom: {

                        yAxisIndex: ‘none’

                    },

                    dataView: {readOnly: false},

                    magicType: {type: [‘line’, ‘bar’]},

                    restore: {},

                    saveAsImage: {}

                }

            },

            xAxis: {

                data: date.split(“,”),

            },

            yAxis: {},

            series: [

                {

                    name: ‘通话次数’,

                    type: ‘line’,

                    data: count.split(“,”),

                    markPoint: {

                        data: [

                            {type: ‘max’, name: ‘最大值’},

                            {type: ‘min’, name: ‘最小值’}

                        ]

                    },

                    markLine: {

                        data: [

                            {type: ‘average’, name: ‘平均值’}

                        ]

                    }

                },

                {

                    name: ‘通话时长’,

                    type: ‘line’,

                    data: duration.split(“,”),

                    markPoint: {

                        data: [

                            {name: ‘月最低’, value: -2, xAxis: 1, yAxis: -1.5}

                        ]

                    },

                    markLine: {

                        data: [

                            {type: ‘average’, name: ‘平均值’},

                            [{

                                symbol: ‘none’,

                                x: ‘90%’,

                                yAxis: ‘max’

                            }, {

                                symbol: ‘circle’,

                                label: {

                                    normal: {

                                        position: ‘start’,

                                        formatter: ‘最大值’

                                    }

                                },

                                type: ‘max’,

                                name: ‘最高点’

                            }]

                        ]

                    }

                },

            ]

        };

        if (option && typeof option === “object”) {

            myChart.setOption(option, true);

        }

        myChart.hideLoading()

    }

 

    function callog2() {

        var dom = document.getElementById(“container2”);

        var myChart = echarts.init(dom);

        myChart.showLoading();

        var option = {

            tooltip: {

                trigger: ‘axis’

            },

            legend: {

                data: [‘通话次数’, ‘通话时长’]

            },

            toolbox: {

                show: true,

                feature: {

                    dataZoom: {

                        yAxisIndex: ‘none’

                    },

                    dataView: {readOnly: false},

                    magicType: {type: [‘line’, ‘bar’]},

                    restore: {},

                    saveAsImage: {}

                }

            },

            grid:{

                x:100,

                y:100,

                borderWidth:1

            },

            xAxis: {

                data: date.split(“,”),

            },

            yAxis: {},

            series: [

                {

                    name: ‘通话次数’,

                    type: ‘bar’,

                    data: count.split(“,”),

                    markPoint: {

                        data: [

                            {type: ‘max’, name: ‘最大值’},

                            {type: ‘min’, name: ‘最小值’}

                        ]

                    },

                    markLine: {

                        data: [

                            {type: ‘average’, name: ‘平均值’}

                        ]

                    }

                },

                {

                    name: ‘通话时长’,

                    type: ‘bar’,

                    data: duration.split(“,”),

                    markPoint: {

                        data: [

                            {name: ‘月最低’, value: -2, xAxis: 1, yAxis: -1.5}

                        ]

                    },

                    markLine: {

                        data: [

                            {type: ‘average’, name: ‘平均值’},

                            [{

                                symbol: ‘none’,

                                x: ‘90%’,

                                yAxis: ‘max’

                            }, {

                                symbol: ‘circle’,

                                label: {

                                    normal: {

                                        position: ‘start’,

                                        formatter: ‘最大值’

                                    }

                                },

                                type: ‘max’,

                                name: ‘最高点’

                            }]

                        ]

                    }

                },

            ]

        };

        if (option && typeof option === “object”) {

            myChart.setOption(option, true);

        }

        myChart.hideLoading()

    }

 

</script>

</body>

</html>

 

 

 


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)