liyongli
/
appDate


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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/f2.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <style>
        .pageAccess .row {
            padding-left: 15px;
        }

        .pageAccess .col-md-6 {
            padding-left: 0;
        }

        .totalNum {
            font-size: 14px;
            text-align: center;
        }

        .totalNum .head {
            font-size: 42px;
            color: #91afc8;
        }
    </style>
</head>

<body class="pageAccess">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>话题</td>
                <td>传播量</td>
                <td>话题</td>
                <td>传播量</td>
            </tr>
        </thead>
        <tbody class="summary">
        </tbody>
    </table>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">传播量趋势</div>
                <div class="panel-body">
                    <canvas id="container" style="width: 100%;height: 100%;" class=""></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">传播量趋势</div>
                <div class="panel-body">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/base.js"></script>
<script>
    let searchObj = getsearch();


    function line1(li) {
        // 传播量趋势
        const chart = new F2.Chart({
            id: 'container',
            pixelRatio: window.devicePixelRatio
        });
        chart.source(li, {
            time: {
                type: 'timeCat',
                tickCount: 3,
                range: [0, 1]
            },
            tem: {
                tickCount: 5,
                min: 0
            }
        });
        chart.axis('playCount', {
            label: function label(text, index, total) {
                const textCfg = {};
                textCfg.text = formatnum(text);
                return textCfg;
            },
            grid: null
        });

        chart.axis('dt', {
            label: function label(text, index, total) {
                const textCfg = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
            }
        });
        chart.tooltip({
            onShow: function onShow(ev) {
                const items = ev.items;
                items[0].name = items[0].title;
                items[0].value = formatnum(text);
                items[1].name = null;
                items[1].value = 0;
            }
        });

        chart.area()
            .position('dt*playCount')
            .color('l(90) 0:#1890FF 1:#f7f7f7')
            .shape('smooth');
        chart.line()
            .position('dt*playCount')
            .color('l(90) 0:#1890FF 1:#f7f7f7')
            .shape('smooth');
        chart.render();
    }

    function getAllData() {
        require('GET', {
            url: "/topic/overview",
            data: {
                topic: searchObj.topic
            }
        }).then(data => {
            const li = data || [];
            for (let i = 0; i < li.length; i += 2) {
                const v = li[i], vnext = li[i+1];
                let tr = $("<tr></tr>");
                tr.append($(`<td>${v.subTopic}</td><td>${formatnum(v.playCount)}</td>`));
                if (vnext) tr.append($(`<td>${vnext.subTopic}</td><td>${formatnum(vnext.playCount)}</td>`));
                else  tr.append($(`<td></td><td></td>`));
                $(".summary").append(tr)
            }
        })
    }

    function gethistory() {
        require('GET', {
            url: "/topic/history",
            data: {
                topic: searchObj.topic
            }
        }).then(li => {
            line1(li);
        })
    }

    function getread(){
        require('GET', {
            url: "/topic/read",
            data: {
                topic: searchObj.topic,
                depRange: "MONTH"
            }
        }).then(li => {
            console.log('--', li);
        })
    }

    function init() {
        let h = $('.panel-body').width() * 9 / 16;
        $('.panel-body').height(h);
        getAllData();
        gethistory();
        getread();
    }
    init();

</script>

</html>