前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >actions自动更新站点统计数据

actions自动更新站点统计数据

作者头像
Qwe7
发布2022-03-20 08:07:23
8030
发布2022-03-20 08:07:23
举报
文章被收录于专栏:网络收集

简析原理

获取百度统计开放api的token,利用python将百度统计api返回的统计数据下载保存为json文件,再利用JavaScript读取并处理json数据,将处理好的数据通过echarts.js绘制为图表。

获取token与site_id

在此之前我相信你已经完成了在百度统计的注册并将已经可以正常使用百度统计功能。关于获取token和site_id,可以参考百度统计文档或者博主Eurkon的教程里面都讲的很清楚不再赘叙。值得注意的是获取的token是由有效期的为一个月需要每隔一个月重新利用refresh_token重新更新token故可将更新token的链接保存好待token失效后可直接利用该链接更新。

使用python下载文件

通过6个链接,我们可以获取:一年内每日访问统计、访问地图数据、月度访问统计、来源分类统计、搜索引擎访问统计和外部链接访问统计;通过python进行下载保存。为了避免跨域问题所以保存的json文件需要和census.js在同一目录下,关于跨域问题可以通过此帖了解一下。我先将完整的结构目录展示出来,你同理创建即可。

javascript

代码语言:javascript
复制
source 
└── census
    └── index.md //辅助统计页面渲染
    └── census.js //处理数据
    └──data
        └──get.py //获取保存数据
theme
└──matery
    └──layout
        └──census.ejs//渲染为统计页面

按照如上目录新建好get.py文件后在其中写入如下内容:

python

代码语言:javascript
复制
import requests
import time, datetime

# 开始统计的日期
start_date   = '20201101'
date         = datetime.datetime.now()
# 结束统计的日期
end_date     = str(date.year) + (str(date.month) if date.month > 9 else ('0' + str(date.month))) + (str(date.day) if date.day > 9 else ('0' + str(date.day)))
# token和siteid
#需要修改为你的token和siteid
access_token = '121.*******'
site_id      = '16*******'
# 百度统计API
dataUrl      = 'https://openapi.baidu.com/rest/2.0/tongji/report/getData?access_token=' + access_token + '&site_id=' + site_id
# 统计访问次数 PV 填写 'pv_count',统计访客数 UV 填写 'visitor_count',二选一
metrics      = 'pv_count'
ips      = 'visitor_count'

def downFile(url, fileName, prefix=''):
    print('downloading :', url)
    down_res = requests.get(url)
    with open(prefix+fileName, 'wb') as f:
        f.write(down_res.content)
    print('writing :', prefix+fileName)

# 访客地图
downFile(dataUrl + '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=visit/district/a', 
    'map.json')

# 访问趋势
downFile(dataUrl + '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=trend/time/a&gran=month', 
    'pv.json')
downFile(dataUrl + '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + ips + '&method=trend/time/a&gran=month', 
    'uv.json')
# 访问来源
downFile(dataUrl + '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/all/a', 
    'sources.json')

## 搜索引擎
downFile(dataUrl + '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/engine/a', 
    'engine.json')

## 外部链接
downFile(dataUrl + '&start_date=' + start_date + '&end_date=' + end_date + '&metrics=' + metrics + '&method=source/link/a', 
    'link.json')

# 访问日历
'''
访问日历需要获取一年内的数据,按照一年365天计算,大概为52周多一点,所以前面有完整的52排,获取方式只要通过开始日期年份-1即可
然后就是第53排的处理,python中的date.weekday()获取的星期几是0对应周一,所以通过(date.weekday()+1)%7即可转换到0对应周日
于是在52周的基础上,减去星期数,就可以得到新的start_date
'''
date       = datetime.datetime(date.year-1, date.month, date.day)
date       = datetime.datetime.fromtimestamp(date.timestamp()-3600*24*((date.weekday()+1)%7))
start_date = str(date.year) + (str(date.month) if date.month > 9 else ('0' + str(date.month))) + (str(date.day) if date.day > 9 else ('0' + str(date.day)))
downFile(dataUrl + '&method=overview/getTimeTrendRpt' + '&metrics=' + metrics + '&start_date=' + start_date + '&end_date=' + end_date,
    'calendar.json')
downFile(dataUrl + '&method=overview/getTimeTrendRpt' + '&metrics=' + ips + '&start_date=' + start_date + '&end_date=' + end_date,
    'ipcalendar.json')

本地测试:如果你本地安装有python环境可以直接cd存放到get.py的目录python get.py,提示缺少库安装即可。若你没有完成GitHubactions集成化部署也可以通过此方法定期半自动更新,不过还是建议弄一下集成化部署真的很香。

新建md和ejs文件

如前结构图所示新建index.mdcensus.ejs文件。

在index.md中写入如下内容:

代码语言:javascript
复制
---
title: census
date: 2020-10-31 10:11:28
type: "census"
layout: "census"
---

在census.ejs中写入如下内容:

代码语言:javascript
复制
<%- partial('_partial/bg-cover') %>
<style>
  .journal {
    padding: 12px;
    border: 1px dashed #e6e6e6;
    color: #969696;
    position: relative;
    display: inline-block;
    width: 95%;
    background: #fbfbfb50;
    border-radius: 10px;
    font-size: 16px;
    margin: 12px auto;
  }
</style>
<script type="text/javascript" src="https://npm.elemecdn.com/echarts@5.1.1/dist/echarts.min.js"></script>
<script src="https://npm.elemecdn.com/echarts@4.7.0/map/js/china.js"></script>
<main class="content">
  <div class="container chip-container">
    <div class="card">
      <div class="card-content">
        <div class="tag-title center-align">
          <div class="journal">
            <div class="title center-align">“ 站点统计”</div>
            “ 自 2020-11-14 起,每12小时自动更新一次 ”
          </div>
        </div>
        <div id="calendar_container" style="min-height: 200px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative"></div>
        <div id="uv_container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative" ></div>
        <div id="pv_container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative" ></div>
        <div id="map_container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative" ></div>
        <div id="sources_container" style="min-width: 250px; height: 400px; margin-top: 50px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative" ></div>
        <script src="/census/census.js"></script>
      </div>
    </div>
  </div>
</main>

calendar_container为访客日历图的容器,uv_container为站点访客数统计图的容器,pv_container为站点访问量统计图的容器,map_container为站点访问地点地图的容器,sources_container为站点访客来源分析饼图的容器。

新建census.js文件

在如前结构图所示新建census.js文件写入如下内容:

javascript

代码语言:javascript
复制
var metrics     = 'pv_count' // 统计访问次数 PV 填写 'pv_count',统计访客数 UV 填写 'visitor_count',二选一
var metricsName = (metrics === 'pv_count' ? '访问次数' : (metrics === 'visitor_count' ? '访客数' : ''))
function generatePieces(maxValue, colorBox) &#123;
    var pieces = [];
    var quotient = 1;
    var temp = &#123;'lt': 1, 'label': '0', 'color': colorBox[0]&#125;;
    pieces.push(temp);

    if (maxValue && maxValue >= 10) &#123;
        quotient = Math.floor(maxValue / 10)+1;
        for (var i = 1; i <= 10; i++) &#123;
            var temp = &#123;&#125;;
            if (i == 1)   temp.gte = 1;
            else   temp.gte = quotient * (i - 1);
            temp.lte = quotient * i;
            temp.color = colorBox[i];
            pieces.push(temp);
        &#125;
    &#125;
    return JSON.stringify(pieces);
&#125;

var append_div_visitcalendar = (parent, text) => &#123;
    if (parent !== null) &#123;
        if (typeof text === 'string') &#123;
            var temp = document.createElement('div');
            temp.innerHTML = text;
            var frag = document.createDocumentFragment();
            while (temp.firstChild) &#123;
                frag.appendChild(temp.firstChild)
            &#125;
            parent.appendChild(frag)
        &#125; else &#123;
            parent.appendChild(text)
        &#125;
    &#125;
&#125;;

function calChart () &#123;
    let script = document.createElement("script")
    fetch('/census/data/ipcalendar.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let date_arr = data.result.items[0];
        let value_arr = data.result.items[1];
        let calArr = [];
        let maxValue = 0, total = 0, weekdatacore = 0, thisweekdatacore = 0;
        let colorBox = ['#EBEDF0', '#90EE90', '#98FB98', '#32CD32', '#00FF00', '#7FFF00', '#3CB371', '#2E8B57', '#228B22', '#008000', '    #006400'];
        for (let i = 0; i < date_arr.length; i++) &#123;
            calArr.push([date_arr[i][0], value_arr[i][0] === '--' ? 0 : value_arr[i][0]] );
            maxValue = value_arr[i][0] > maxValue ? value_arr[i][0] : maxValue ;
            total += value_arr[i][0] === '--' ? 0 : value_arr[i][0];
        &#125;
        for (let i = date_arr.length-1; i >= date_arr.length-7; i--)   weekdatacore += value_arr[i][0] === '--' ? 0 : value_arr[i][0];
        for (let i = date_arr.length-1; i >= date_arr.length-30; i--)   thisweekdatacore += value_arr[i][0] === '--' ? 0 : value_arr[i][0];
        let calArrJson = JSON.stringify(calArr);
        script.innerHTML = `
        var calChart = echarts.init(document.getElementById("calendar_container"));
        var option = &#123;
            title: &#123; text: '访问日历' &#125;,
            tooltip: &#123;
                padding: 10,
                backgroundColor: '#555',
                borderColor: '#777',
                borderWidth: 1,
                textStyle: &#123; color: '#fff' &#125;,
                formatter: function (obj) &#123;
                    var value = obj.value;
                    return '<div style="font-size: 14px;">' + value[0] + ':' + value[1] + '</div>';
                &#125;
            &#125;,
            visualMap: &#123;
                show: false,
                showLabel: true,
                min: 0,
                max: $&#123;maxValue&#125;,
                type: 'piecewise',
                orient: 'horizontal',
                left: 'center',
                bottom: 0,
                pieces: $&#123;generatePieces(maxValue, colorBox)&#125;
            &#125;,
            calendar: [&#123;
                left: 'center',
                range: ['$&#123;date_arr[0]&#125;', '$&#123;date_arr[date_arr.length-1]&#125;'],
                cellSize: [14, 14],
                splitLine: &#123;
                    show: false
                &#125;,
                itemStyle: &#123;
                    color: '#ebedf0',
                    borderColor: '#fff',
                    borderWidth: 2
                &#125;,
                yearLabel: &#123;
                    show: false
                &#125;,
                monthLabel: &#123;
                    nameMap: 'cn',
                    fontSize: 11
                &#125;,
                dayLabel: &#123;
                    formatter: '&#123;start&#125;  1st',
                    nameMap: 'cn',
                    fontSize: 11
                &#125;
            &#125;],
            series: [&#123;
                type: 'heatmap',
                coordinateSystem: 'calendar',
                calendarIndex: 0,
                data: $&#123;calArrJson&#125;,
            &#125;]    
        &#125;;
        calChart.setOption(option);`;
        let style = '<style>.number&#123;font-family: sans-serif, Arial;margin-top: 10px;text-align:center;width:100%;padding:10px;margin:0 auto;&#125;.contrib-column&#123;text-align:center;border-left:1px solid #ddd;border-top:1px solid #ddd;&#125;.contrib-column-first&#123;border-left:0;&#125;.table-column&#123;padding:10px;display:table-cell;flex:1;vertical-align:top;&#125;.contrib-number&#123;font-weight:400;line-height:1.3em;font-size:24px;display:block;&#125;.left.text-muted&#123;float:left;margin-left:9px;color:#767676;&#125;.left.text-muted a&#123;color:#4078c0;text-decoration:none;&#125;.left.text-muted a:hover&#123;text-decoration:underline;&#125;h2.f4.text-normal.mb-3&#123;display:none;&#125;.float-left.text-gray&#123;float:left;&#125;.position-relative&#123;width:100%;&#125;@media screen and (max-width:650px)&#123;.contrib-column&#123;display:none&#125;&#125;</style>';
        style = '<div style="display:flex;width:100%" class="number"><div class="contrib-column contrib-column-first table-column"><span class="text-muted">过去一年访问</span><span class="contrib-number">' + total + '</span><span class="text-muted">' + date_arr[0][0] + '&nbsp;-&nbsp;' + date_arr[date_arr.length-1][0] + '</span></div><div class="contrib-column table-column"><span class="text-muted">最近30天访问</span><span class="contrib-number">' + thisweekdatacore + '</span><span class="text-muted">' + date_arr[date_arr.length-30][0] + '&nbsp;-&nbsp;' + date_arr[date_arr.length-1][0] + '</span></div><div class="contrib-column table-column"><span class="text-muted">最近7天访问</span><span class="contrib-number">' + weekdatacore + '</span><span class="text-muted">' + date_arr[date_arr.length-7][0] + '&nbsp;-&nbsp;' + date_arr[date_arr.length-1][0] + '</span></div></div>' + style;

        document.getElementById("calendar_container").after(script);
        append_div_visitcalendar(calendar_container, style);
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
&#125;
function get_year(s) &#123;
    return parseInt(s.substr(0, 4))
&#125;
function get_month(s) &#123;
    return parseInt(s.substr(5, 2))
&#125;
// 浏览量
function pvChart () &#123; 
    let script = document.createElement("script")
    fetch('/census/data/pv.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let date = new Date();
        let monthValueArr = &#123;&#125;;
        let monthName = data.result.items[0];
        let monthValue = data.result.items[1];
        for (let i =2020; i <= date.getFullYear(); i++)   monthValueArr[String(i)] = [ ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ];
        monthValueArr
        for (let i = 0; i < monthName.length; i++) &#123;
            let year = get_year(monthName[i][0]);
            let month = get_month(monthName[i][0]);
            monthValueArr[String(year)][String(month-1)] = monthValue[i][0];
        &#125; 
        script.innerHTML = `
        var pvChart = echarts.init(document.getElementById('pv_container'), 'light');
        var pvOption = &#123;
    color: ['#01C2F9', '#18D070', '#d223e7', '#3F77FE'],
    title: &#123;
        text: '站点访问量统计',
        subtext: '数据来源: 百度统计(自 2020/11/14 开始统计)',
        textStyle: &#123;
            color: '#504b4d',
        &#125;
    &#125;,
    legend: &#123;
        data: ['2020年访问量', '2021年访问量'],
        //修改年份
        bottom: 0,
        left: 'center',
        textStyle: &#123;
            color: '#504b4d',
        &#125;
    &#125;,
    tooltip: &#123;
        trigger: 'axis'
    &#125;,
    toolbox: &#123;
        show: true,
        feature: &#123;
            mark: &#123;
                show: true
            &#125;,
            magicType: &#123;
                show: true,
                type: ['line', 'bar', 'stack', 'tiled']
            &#125;,
            restore: &#123;
                show: true
            &#125;,
            saveAsImage: &#123;
                show: true
            &#125;
        &#125;
    &#125;,
    calculable: true,
    xAxis: [&#123;
        type: 'category',
        boundaryGap: false,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;
    &#125;],
    yAxis: [&#123;
        type: 'value',
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;,
        axisTick: &#123;
            show: true
          &#125;,
        axisLine: &#123;
            show: true,
            lineStyle: &#123;
              color: '#4c4948'&#125;
            &#125;
    &#125;],
    series: [&#123;
        name: '2020年访问量',
        type: 'line',
        stack: '总量',
        data: [$&#123;monthValueArr["2020"]&#125;],
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            //第一个年份对应的数据顺序对应月份
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;
    &#125;,
    &#123;
        name: '2021年访问量',
        type: 'line',
        stack: '总量',
        data: [$&#123;monthValueArr["2021"]&#125;],
        //第二个年份对应的数据顺序对应月份
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;
    &#125;]
&#125;;
        pvChart.setOption(pvOption);
        window.addEventListener("resize", () => &#123; 
            pvChart.resize();
        &#125;);`
        document.getElementById('pv_container').after(script);
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
&#125;
//访客数
function uvChart () &#123; 
    let script = document.createElement("script")
    fetch('/census/data/uv.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let date = new Date();
        let monthValueArr = &#123;&#125;;
        let monthName = data.result.items[0];
        let monthValue = data.result.items[1];
        for (let i =2020; i <= date.getFullYear(); i++)   monthValueArr[String(i)] = [ ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ];
        monthValueArr
        for (let i = 0; i < monthName.length; i++) &#123;
            let year = get_year(monthName[i][0]);
            let month = get_month(monthName[i][0]);
            monthValueArr[String(year)][String(month-1)] = monthValue[i][0];
        &#125;
        script.innerHTML = `
        var uvChart = echarts.init(document.getElementById('uv_container'), 'light');
        var uvOption = &#123;
    color: ['#d223e7', '#3F77FE', '#01C2F9', '#18D070'],
    title: &#123;
        text: '站点访客数统计',
        subtext: '数据来源: 百度统计(自 2020/11/14 开始统计)',
        textStyle: &#123;
            color: '#504b4d',
        &#125;
    &#125;,
    tooltip: &#123;
        trigger: 'axis'
    &#125;,
    legend: &#123;
        data: ['2020年访客数', '2021年访客数'],
        bottom: 0,
        left: 'center',
        textStyle: &#123;
            color: '#504b4d',
        &#125;
    &#125;,
    //修改年份
    toolbox: &#123;
        show: true,
        feature: &#123;
            mark: &#123;
                show: true
            &#125;,
            magicType: &#123;
                show: true,
                type: ['line', 'bar', 'stack', 'tiled']
            &#125;,
            restore: &#123;
                show: true
            &#125;,
            saveAsImage: &#123;
                show: true
            &#125;
        &#125;
    &#125;,
    calculable: true,
    xAxis: [&#123;
        type: 'category',
        boundaryGap: false,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;
    &#125;],
    yAxis: [&#123;
        type: 'value',
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;,
        axisTick: &#123;
            show: true
          &#125;,
        axisLine: &#123;
            show: true,
            lineStyle: &#123;
              color: '#4c4948'&#125;
            &#125;
    &#125;],
    series: [&#123;
        name: '2020年访客数',
        type: 'line',
        smooth: true,
        itemStyle: &#123;
            normal: &#123;
                areaStyle: &#123;
                    type: 'default'
                &#125;
            &#125;
        &#125;,
        data: [$&#123;monthValueArr["2020"]&#125;],
        //第一个年份对应的数据顺序对应月份
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;,
    &#125;,
    &#123;
        name: '2021年访客数',
        type: 'line',
        smooth: true,
        itemStyle: &#123;
            normal: &#123;
                areaStyle: &#123;
                    type: 'default'
                &#125;
            &#125;
        &#125;,
        data: [$&#123;monthValueArr["2021"]&#125;],
        //第二个年份对应的数据顺序对应月份
        axisLabel: &#123;
            formatter: '&#123;value&#125;',
            textStyle: &#123;
                color: '#929298'
            &#125;
        &#125;,
    &#125;]
&#125;;
        uvChart.setOption(uvOption);
        window.addEventListener("resize", () => &#123; 
            uvChart.resize();
        &#125;);`
        document.getElementById('uv_container').after(script);
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
&#125;
// 访问地图
function mapChart () &#123;
    let script = document.createElement("script")
    fetch('/census/data/map.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let mapName = data.result.items[0]
        let mapValue = data.result.items[1]
        let mapArr = []
        let max = mapValue[0][0]
        for (let i = 0; i < mapName.length; i++) &#123;
            mapArr.push(&#123; name: mapName[i][0].name, value: mapValue[i][0] &#125;)
        &#125;
        let mapArrJson = JSON.stringify(mapArr)
        script.innerHTML = `
        var mapChart = echarts.init(document.getElementById('map_container'), 'light');
        var mapOption = &#123;
            title: &#123; text: '访问地点' &#125;,
            tooltip: &#123; trigger: 'item' &#125;,
            visualMap: &#123;
                min: 0,
                max: $&#123;max&#125;,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],
                color: ['#1E90FF', '#AAFAFA'],
                calculable: true
            &#125;,
            series: [&#123;
                name: '$&#123;metricsName&#125;',
                type: 'map',
                mapType: 'china',
                showLegendSymbol: false,
                label: &#123;
                    emphasis: &#123; show: false &#125;
                &#125;,
                itemStyle: &#123;
                    normal: &#123;
                        areaColor: 'rgba(255, 255, 255, 0.1)',
                        borderColor: '#121212'
                    &#125;,
                    emphasis: &#123; areaColor: 'gold' &#125;
                &#125;,
                data: $&#123;mapArrJson&#125;
            &#125;]
        &#125;;
        mapChart.setOption(mapOption);
        window.addEventListener("resize", () => &#123; 
            mapChart.resize();
        &#125;);`
        document.getElementById('map_container').after(script);
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
&#125;
// 访问来源
function sourcesChart () &#123;
    let script = document.createElement("script");
    var innerHTML = '';
    var link = 0, direct = 0, search = 0;
    fetch('/census/data/sources.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let sourcesName = data.result.items[0];
        let sourcesValue = data.result.items[1];
        let sourcesArr = [];
        for (let i = 0; i < sourcesName.length; i++)
            sourcesArr.push(&#123; name: sourcesName[i][0].name, value: sourcesValue[i][0] &#125;);
        link = sourcesArr[1]['value'] ;
        search = sourcesArr[2]['value'] ;
        direct = sourcesArr[0]['value'] ;
        innerHTML += `
        var sourcesChart = echarts.init(document.getElementById('sources_container'), 'light');
        var sourcesOption = &#123;
            title:&#123;text:'站点访客来源统计',itemGap:20,textStyle:&#123;color:'#504b4d',&#125;&#125;,
            tooltip: &#123; trigger: 'item', formatter: '&#123;a&#125; <br/>&#123;b&#125;: &#123;c&#125; (&#123;d&#125;%)' &#125;,
            legend: &#123;
                data: ['直达', '外链', '搜索', '百度', '谷歌', '必应', 'Github', '开往/十年之约'],
                y: 'bottom'
            &#125;,
            series: [
                &#123;
                    name: '来源明细', type: 'pie', radius: ['45%', '60%'],
                    labelLine: &#123; length: 30 &#125;,
                    label: &#123;
                        formatter: '&#123;a|&#123;a&#125;&#125;&#123;abg|&#125;\\n&#123;hr|&#125;\\n  &#123;b|&#123;b&#125;:&#125;&#123;c&#125;  &#123;per|&#123;d&#125;%&#125;  ',
                        backgroundColor: '#F6F8FC', borderColor: '#8C8D8E',
                        borderWidth: 1, borderRadius: 4,
                        rich: &#123;
                            a: &#123; color: '#6E7079', lineHeight: 22, align: 'center' &#125;,
                            hr: &#123; borderColor: '#8C8D8E', width: '100%', borderWidth: 1, height: 0 &#125;,
                            b: &#123; color: '#4C5058', fontSize: 14, fontWeight: 'bold', lineHeight: 33 &#125;,
                            per: &#123; color: '#fff', backgroundColor: '#4C5058', padding: [3, 4], borderRadius: 4 &#125;
                        &#125;
                    &#125;,
                    data: [`;
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
    fetch('/census/data/engine.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let enginesName = data.result.items[0];
        let enginesValue = data.result.items[1];
        let enginesArr = [];
        for (let i = 0; i < enginesName.length; i++)
            enginesArr.push(&#123; name: enginesName[i][0].name, value: enginesValue[i][0] &#125;);
        innerHTML += `
                        &#123;value: $&#123;enginesArr[1]['value']&#125;, name: '谷歌'&#125;,
                        &#123;value: $&#123;enginesArr[0]['value']&#125;, name: '百度'&#125;,`;
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
    fetch('/census/data/link.json?date'+new Date()).then(data => data.json()).then(data => &#123;
        let linksName = data.result.items[0];
        let linksValue = data.result.items[1];
        let linksArr = &#123;&#125;;
        for (let i = 0; i < linksName.length; i++)
            linksArr[linksName[i][0].name] = linksValue[i][0];
        let sum = data.result.sum[0][0];
        let bing = linksArr['http://cn.bing.com']+linksArr['http://www.bing.com'];
        let github = linksArr['http://github.com'];
        innerHTML += `
                        &#123;value: $&#123;bing&#125;, name: '必应'&#125;,
                        &#123;value: $&#123;direct&#125;, name: '直达'&#125;,
                        &#123;value: $&#123;github&#125;, name: 'Github'&#125;,
                        &#123;value: $&#123;sum-bing-github&#125;, name: '友链'&#125;
                    ]
                &#125;,
                &#123;
                    name: '访问来源', type: 'pie', selectedMode: 'single', radius: [0, '30%'],
                    label: &#123; position: 'inner', fontSize: 14&#125;,
                    labelLine: &#123; show: false &#125;,
                    data: [
                        &#123;value: $&#123;search+bing&#125;, name: '搜索', itemStyle: &#123; color : 'green' &#125;&#125;,
                        &#123;value: $&#123;direct&#125;, name: '直达', itemStyle: &#123; color : '#FFDB5C' &#125;&#125;,
                        &#123;value: $&#123;link-bing&#125;, name: '外链', itemStyle: &#123; color : '#32C5E9' &#125;&#125;
                    ]
                &#125;,
            ]
        &#125;;
        sourcesChart.setOption(sourcesOption);
        window.addEventListener("resize", () => &#123; 
            sourcesChart.resize();
        &#125;);`;
        script.innerHTML = innerHTML;
    &#125;).catch(function (error) &#123;
        console.log(error);
    &#125;);
    document.getElementById('sources_container').after(script);
&#125;
if (document.getElementById("calendar_container"))   calChart();
if (document.getElementById('map_container'))   mapChart();
if (document.getElementById('uv_container'))   uvChart();
if (document.getElementById('pv_container'))   pvChart();
if (document.getElementById('sources_container'))   sourcesChart();

跳过渲染由于census.js在source文件夹下会被渲染,如>会被渲染为gt。在站点yml里skip_render:添加跳过渲染项如下:

yaml

代码语言:javascript
复制
skip_render:
  - 'census/census.js'
  - 'census/data/**'

在主题yml里添加导航就不赘叙了,到此你就可以通过hexo s本地预览查看了。

配置GitHub Action

代码语言:javascript
复制
blog (repository)
└── .github
    └── workflows
        └── getdata.yml

按照如上目录新建getdata.yml如果你已经完成GitHubactions集成化部署。写入如下内容:

yaml

代码语言:javascript
复制
name: 获取百度统计数据
on:
  schedule:
    - cron: '    0 0,6,12,18 * * *'
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main #2020年10月后github新建仓库默认分支改为main,注意更改
      - name: Set up Python #安装python
        uses: actions/setup-python@v1
        with:
          python-version: 3.8
      - name: 获取数据
        run: |
          cd /home/runner/work/hexo/hexo/source/census/data/
          pip install requests 
          python get.py
          cd /home/runner/work/hexo/hexo
          git config --global user.name "你的GitHub用户名如我的brqs"
          git config --global user.email "你的GitHub邮箱如3447851674@qq.com"
git add .
git commit -m "百度统计数据上传"
git push origin main

上传到仓库即可,我设置的是每六小时自动执行一次你也可以降低频率。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简析原理
  • 获取token与site_id
  • 使用python下载文件
  • 新建md和ejs文件
  • 新建census.js文件
  • 配置GitHub Action
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档