aqm
/
Customer-Service


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">

    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>今日数据分析</h5>
                </div>
                <div class="ibox-content">
                    <div class="ibox-content" style="height: 350px" id="bar">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">

    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div style="display: flex;">
                    <div class="ibox-title" style="width: 50%;">
                        <h5>今日数据分析</h5>
                    </div>
                    <div class="ibox-title" style="width: 50%;">
                        <h5>今日数据分析</h5>
                    </div>
                </div>
                <div class="ibox-content no-padding" style="display: flex;">
                    <div class="ibox-content" style="width: 50%;height: 350px" id="pie_evaluate">

                    </div>
                    <div class="ibox-content" style="width: 50%;height: 350px" id="pie_system">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/static/admin/js/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">
    var xData = {$xData};
    var chatData = {$chatData};
    var serviceData = {$serviceData};
    var queueData = {$queueData};
    var evaluate = {$evaluate};
    var systemCount = {$systemCount};
    // 基于准备好的dom，初始化echarts实例
    var myChart_bar = echarts.init(document.getElementById('bar'));
    var pie_evaluate = echarts.init(document.getElementById('pie_evaluate'));
    var pie_system = echarts.init(document.getElementById('pie_system'));

    // 指定图表的配置项和数据
    var option_bar = {
        color: ['#1da1f2', '#fa7070', '#fcbb07', '#90dd75', '#8fa6ec', '#157efb'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            itemWidth: 20, //图例的宽度
            itemHeight: 8, //图例的高度
            itemGap: 40,
            left: '55',
            top: 'top',
            icon: 'rect',
            //selectedMode: false, //取消图例上的点击事件
            data: ['会话量', '消息量','排队量'],
        },
        grid: {
            left: '30',
            right: '30',
            bottom: '20',
            containLabel: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        calculable: true,
        xAxis: [{
            splitLine: {
                show: false
            }, //去除网格线
            splitArea: {
                show: false
            }, //保留网格区域
            axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                    color: '#979797',
                    width: 0.6, //这里是为了突出显示加上的
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: { //轴上的数据样式
                color: '#393C40',
            },
            data: xData,
        }],
        yAxis: [{
            // type: 'value',
            splitLine: {
                show: false
            }, //去除网格线
            splitArea: {
                show: false
            }, //保留网格区域
            axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                    color: '#979797',
                    width: 0.6, //这里是为了突出显示加上的
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: { //轴上的数据样式
                color: '#393C40',
            }
        }],
        series: [
            {
                name: '会话量',
                type: 'bar',
                barWidth: 24,// 柱形的宽度
                barGap: 0,
                data: serviceData
            },
            {
                name: '消息量',
                type: 'bar',
                barWidth: 24,// 柱形的宽度
                barGap: 0,
                data: chatData
            },
            {
                name: '排队量',
                type: 'bar',
                barWidth: 24,// 柱形的宽度
                barGap: 0,
                data: queueData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart_bar.setOption(option_bar);

    // 指定图表的配置项和数据
    var option_PE = {
        backgroundColor: '#fff',

        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        series: [{
            name: '满意度',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [
                {
                    value: evaluate['evaluateGood'],
                    name: '满意'
                }, {
                    value: evaluate['evaluateSecondary'],
                    name: '一般'
                }, {
                    value: evaluate['evaluateBad'],
                    name: '不满意'
                }, {
                    value: evaluate['evaluateNo'],
                    name: '未评价'
                }
            ].sort(function(a, b) {
                return a.value - b.value
            }),
            roseType: 'radius',

            label: {
                normal: {
                    formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
                    rich: {
                        c: {
                            color: 'rgb(241,246,104)',
                            fontSize: 20,
                            fontWeight:'bold',
                            lineHeight: 5
                        },
                        b: {
                            color: 'rgb(98,137,169)',
                            fontSize: 15,
                            height: 40
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgb(98,137,169)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,

                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowBlur: 50,
                }
            }
        }]
    };
    var option_PS = {
        backgroundColor: '#fff',

        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        series: [{
            name: '满意度',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: systemCount.sort(function(a, b) {
                return a.value - b.value
            }),
            roseType: 'radius',

            label: {
                normal: {
                    formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
                    rich: {
                        c: {
                            color: 'rgb(241,246,104)',
                            fontSize: 20,
                            fontWeight:'bold',
                            lineHeight: 5
                        },
                        b: {
                            color: 'rgb(98,137,169)',
                            fontSize: 15,
                            height: 40
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgb(98,137,169)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,

                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowBlur: 50,
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    pie_evaluate.setOption(option_PE);
    pie_system.setOption(option_PS);
</script>
</body>
</html>