bignews_64
/
main_count.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em id="totalArticle"></em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em id="dayArticle"></em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em id="totalComment"></em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em id="dayComment"></em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./js/jqconfig.js"></script>
    <script>
        $(function () {
            // 页面加载完毕以后发出ajax请求获得数据
            getData();
            getcurve_show_data();
            get_pie_data();
        })

        // 1.0 获取统计数据
        function getData() {
            $.ajax({
                url: '/admin/data/info',
                type: 'get',
                success: res => {
                    let { totalArticle, dayArticle, totalComment, dayComment } = res;
                    $('#totalArticle').text(totalArticle)
                    $('#dayArticle').text(dayArticle)
                    $('#totalComment').text(totalComment)
                    $('#dayComment').text(dayComment)
                }
            })
        }

        // 2.0 生成日新增文章趋势图表（折线图）
        // 获取日新增文章趋势的数据
        function getcurve_show_data() {
            $.ajax({
                url: '/admin/data/article',
                type: 'get',
                success: res => {
                    // 数据数组
                    let { date } = res;
                    // 调用生成折线图方法并传入动态数据date动态生成日新增文章趋势图表
                    init_curve_show(date);

                    // 动态化生成柱状图
                    init_column(date);
                }
            })
        }

        // 2.1 负责接收服务器数据动态生成折线图
        function init_curve_show(date) {
            // echars三步写法
            var myChart = echarts.init(document.getElementById('curve_show'));

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // 用来控制图表的x轴要显示的内容，是一个数组
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    data: date.map(item => item.date)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    // 表示图表要显示的类型和数据
                    // data: [820, 932, 901, 934, 1290, 1330, 1320],
                    data: date.map(item => item.count),
                    type: 'line',  // 折线图
                    smooth: true,  // 开启平滑曲线
                    // 让数字显示在曲线上
                    label: {
                        show: true,
                        position: 'top'
                    },
                    // 让图表有渐变填充（此次：从上往下 从红色到白色的线性渐变）
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'red'
                        }, {
                            offset: 1,
                            color: '#ffffff'
                        }])
                    },
                }]
            };

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

        }


        // 3.0 生成文章分类数量统计饼图(动态生成)
        function init_pie(date) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pie_show'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    // 生成图例的数据
                    // data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
                    data: date.map(item => item.name)
                },
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                            length: 30,
                        },

                        // data: [
                        //     { value: 1048, name: '百度' },
                        //     { value: 335, name: '直达' }
                        // ]
                        data: date.map(item => ({ value: item.articles, name: item.name }))
                    }
                ]
            };

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

        // 3.1 动态获取文章分类数据调用饼状图方法init_pie生成图表
        function get_pie_data() {
            // 1.0 ajax请求数据
            $.ajax({
                url: '/admin/data/category',
                type: 'get',
                success: res => {
                    let { date } = res;
                    // 调用init_pie生成图表
                    init_pie(date)
                }
            })
        }

        // 4.0 主状态生成
        function init_column(date) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('column_show'));

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    data: date.map(item => item.date)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: date.map(item => item.count),//[120, 200, 150, 80, 70, 110, 130],
                    barWidth: '20%',  // 负责设置每根柱子的宽度
                    type: 'bar'
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</body>

</html>