bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="images/fszx.ico" />
    <title>应用访问统计</title>
    <meta name="keywords" content="应用访问统计" />
    <meta name="description" content="应用访问统计" />
    <!----自适应----->
    <script src="../../../../Content/js/jquery.min.js"></script>
    <script src="../../../../Content/js/echarts.js"></script>
    <style>
        body{
            background:#fff;
        }
    </style>
</head>

<body>
    <!--饼图-->
    <div id="main1" style="float: left; margin:0 20px 10px 0; width: 48%; height: 350px;border: 1px solid #ccc;">
    </div>
    <!--折线图-->
    <div id="main2" style="float: left; margin:0 20px 10px 0; width: 48%; height: 350px;border: 1px solid #ccc;">
    </div>
    <!--柱状图-->
    <div id="main3" style="float: left; margin:0 20px 10px 0; width: 48%; height: 350px;border: 1px solid #ccc;">
    </div>
    <!--柱状图-->
    <div id="main4" style="float: left; margin:0 20px 10px 0; width: 48%; height: 350px;border: 1px solid #ccc;">
    </div>
    <!--线柱状图-->
    <div id="main5" style="float: left; margin:0 20px 10px 0; width: 48%; height: 350px;border: 1px solid #ccc;">
    </div>
    <script>
        //			饼图
        var myChart1 = echarts.init(document.getElementById('main1'));
        var option1 = {
            title: {
                text: '应用访问次数统计',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}次 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['个人应用', '教师信息管理', '学籍信息管理', '流程设计', '角色管理', '通知公告']
            },
            series: [
                {
                    name: '应用访问次数统计',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '个人应用' },
                        { value: 310, name: '教师信息管理' },
                        { value: 234, name: '学籍信息管理' },
                        { value: 135, name: '流程设计' },
                        { value: 1548, name: '角色管理' },
                        { value: 888, name: '通知公告' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart1.setOption(option1);
        //			折线图
        var myChart2 = echarts.init(document.getElementById('main2'));
        var option2 = {
            title: {
                text: '应用访问今日与昨日浏览量同比',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['今日', '昨日']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['个人应用', '教师信息管理', '学籍信息管理', '流程设计', '角色管理', '通知公告']
            },
            yAxis: {
                type: 'value',
                name: '浏览量/次'
            },
            series: [
                {
                    name: '今日',
                    type: 'line',
                    stack: '总量',
                    data: [12, 32, 21, 34, 44, 20]
                },
                {
                    name: '昨日',
                    type: 'line',
                    stack: '总量',
                    data: [22, 12, 21, 34, 13, 20]
                }
            ]
        };
        myChart2.setOption(option2);
        //			柱状图
        var myChart3 = echarts.init(document.getElementById('main3'));
        option3 = {
            title: {
                text: '应用访问本周与上周浏览量同比',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['本周', '上周']
            },
            xAxis: {
                type: 'category',
                data: ['个人应用', '教师信息管理', '学籍信息管理', '流程设计', '角色管理', '通知公告'],
                axisLabel: {
                    interval: '0',
                    rotate: 10
                }
            },
            yAxis: {
                type: 'value',
                name: '浏览量/次'
            },
            series: [
                {
                    name: '本周',
                    type: 'bar',
                    data: [120, 132, 101, 134, 90, 76]
                },
                {
                    name: '上周',
                    data: [120, 200, 150, 80, 70, 88],
                    type: 'bar'
                }
            ],
            color: ['#61a0a8', '#d48265']
        };
        myChart3.setOption(option3);
        //			柱状图
        var myChart4 = echarts.init(document.getElementById('main4'));
        option4 = {
            title: {
                text: '应用访问本月与上月浏览量同比',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['本月', '上月']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['个人应用', '教师信息管理', '学籍信息管理', '流程设计', '角色管理', '通知公告']
            },
            series: [
                {
                    name: '本月',
                    type: 'bar',
                    data: [120, 340, 240, 134, 400, 300]
                },
                {
                    name: '上月',
                    data: [120, 359, 340, 289, 467, 290],
                    type: 'bar'
                }
            ],
            color: ['#d48265', '#91c7ae']
        };
        myChart4.setOption(option4);
        //			线柱状图
        var myChart5 = echarts.init(document.getElementById('main5'));
        option5 = {
            title: {
                text: '应用访问今年与去年浏览量同比',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['今年', '去年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['个人应用', '教师信息管理', '学籍信息管理', '流程设计', '角色管理', '通知公告'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '浏览量/次',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '今年',
                    type: 'bar',
                    data: [800, 1022, 555, 680, 789, 900]
                },
                {
                    name: '去年',
                    type: 'line',
                    data: [700, 980, 450, 550, 603, 450]
                }
            ]
        };
        myChart5.setOption(option5);

    </script>
</body>

</html>