给zblog网站做个统计图

2024-01-15 15:20
文章标签 网站 做个 统计图 zblog

本文主要是介绍给zblog网站做个统计图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

哪些数据适合做可视化

我们在运营自己的网站的时候，很多时候我们希望能够掌握自己网站的数据，包括网站的访客数量、网站中各分类的文章数量、各个月份的文章数量等。而且很多时候我们不希望我们拿到的是冷冰冰的数据，而是一目了然的数据。这时候数据可视化就非常有用了，如果我们能够通过图表来让自己的网站的数据一目了然，岂不美哉？

数据可视化工具介绍

现在网络上的前端图表库其实并不少，并且很多都是开源的，也就是说，你可以直接拿来用，而不需要付费。其中最有名气的当属由百度主导的echarts项目，现在该项目已经在Apache开源基金会孵化中。echarts是一个非常好用的图表库，不需要什么前置技能，只需要懂一点点JavaScript和json语法即可使用。echarts的图表数据使用json进行渲染。

  • 如下代码就是echarts官网给出的一个简单的图表对象实例：
option = {series: [{type: 'pie',data: [{value: 335,name: '直接访问'},{value: 234,name: '联盟广告'},{value: 1548,name: '搜索引擎'}]}]
};

上述代码中的option是对象的名字，对象中包含的series数组就是用于配置该图表的数据，其中的type字段用于确定图表的类型，pie表示类型为饼图，data数据就是饼图的各个块的数据，value表示该块的数值，name是该块的名字，更多关于echarts对象的API可以参考echarts的官方文档：Documentation - Apache ECharts

  • 一个完整的实例，可直接写到HTML中用浏览器打开即可看到效果：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script></head><body><div id="root" style="width: 600px;height: 400px;"></div><script>var myChart = echarts.init(document.getElementById('root'))option = {series: [{type: 'pie',data: [{value: 335,name: '直接访问'},{value: 234,name: '联盟广告'},{value: 1548,name: '搜索引擎'}]}]};myChart.setOption(option)</script></body>
</html>
  • 完整实例的讲解

要让图表显示出来，那就需要一个容器来放置图表。上述代码中的

<div id="root" style="width: 600px;height: 400px;"></div>

就是用来放置图表的容器，这里需要注意，一定要给容器设置宽高，因为图表都是有一定的宽度和高度的，如果不设置宽高，将会导致图表显示不出来。

脚本中的以下这句

var myChart = echarts.init(document.getElementById('root'))

是根据id获取到div标签，然后用这个标签作为容器来初始化echarts图表。

以下这句是把图表放置到容器中

myChart.setOption(option)
  • 完整实例的效果展示

在这里插入图片描述

zblog API介绍

zblog是有官方文档的，可以去官方文档中去查看相关的API：接口文档 - API (zblogcn.com)

这里我们只用到一个API即可：在这里插入图片描述

请求格式：https://example.com/zb_system/api.php?mod=category&act=list，把example.com换成你自己的域名即可。

请求之后会返回json格式的数据，类似这样的：在这里插入图片描述

然后我们复制这些文本，打开网站json.cn，解析一下json数据，查看json的结构，以便进行json解析。

可以看到，这个json对象中有一个data对象，data对象中又有一个list数组，这个数组列出了网站的所有分类的ID和分类名称，以及分类下的文章数量等：

在这里插入图片描述

那么我们可以想想我们需要哪些数据呢？很显然，我们只需要分类名称和该分类下的文章数量即可构建一个饼图。

而echarts图表的配置项实际上也是一个json对象，所以这就很简单了。

思路如下

我们只需要在我们的网站的页面加载时，请求API获取文章分类数据，然后把返回的json字符串转换成json对象（只有json对象才能解析），然后把解析出来的只赋值给option对象的相应值即可。

把文章统计图表做成zblog模块

  • 打开zblog后台页面

    zblogphp：https://example.com/zb_system/admin/index.php

  • 点击网站设置->API设置->启用API协议

在这里插入图片描述

  • 点击模块管理，再点击新建模块，然后复制以下代码到zblog“正文”的编辑框里面（把代码中的example.com换成你自己的网站域名），名称、文件名、HTML ID自己随便填，类型选择div，其它不管，提交即可。在这里插入图片描述

    <!-- 模块代码 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<div id="statistics" style="display:flex;flex-direction:row;justify-content:center;width:280px;height:375px"></div>
<script type="text/javascript">var chartDom = document.getElementById('statistics');var myChart = echarts.init(chartDom);var option;option = {title: {//图表的标题配置项text: '各分类文章数量',//图表标题left: 'center'//图表左右位置},tooltip: {//提示框trigger: 'item'//item表示在饼块上触发提示框显示},legend: {//图例的配置项// orient: 'vertical',left: 'center',//图例左右位置bottom: '0'//图例上下位置},series: [//“饼”的配置项{// name: '',top:'-20%',//饼图到顶部的距离// left: 'center',type: 'pie',//pie表示饼图stillShowZeroSum: false,//数据值总数为零时是否显示饼图radius: '50%',//饼图半径data: [//饼图的各个块的名字和数值，可以根据需要动态地push。//因为分类数量不是经常变化的，所以也可以像这样一个个地写死{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },{ value: null, name: null },],emphasis: {itemStyle: {//这是设置样式的，相关API可以去查看官方文档shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};function setData() {//发送和处理zblog API的函数const Http = new XMLHttpRequest()//把下面的example.com改成你的网站域名，其它的，包括上面的都不用改//这里全部代码只改这一处即可，这是最简单的方法了，而且效果还挺好的，改好域名直接保存用浏览器访问const url = 'https://example.com/zb_system/api.php?mod=category&act=list'Http.open('GET',url)Http.send()Http.onreadystatechange=function(){if (this.readyState == 4 && this.status==200){var JSONObject = JSON.parse(Http.responseText)for (var i = 0; i < JSONObject.data.list.length; i++) {option.series[0].data[i].value = parseInt(JSONObject.data.list[i].Count)option.series[0].data[i].name = JSONObject.data.list[i].Name}myChart.setOption(option)}}}window.onload = setDatamyChart.on('click',function(params){var cateId = params.dataIndex+2window.location.href = 'https://'+window.location.host+'/category-'+cateId+'.html'// console.log(window.location.host+'?cate='+cateId)})option && myChart.setOption(option);</script>

解决一些问题

  • echarts饼图的“饼块”是可以添加点击事件的，一开始我使用动态网页的时候，这些点击事件没有任何问题，可以正常点击，但是当我开启了伪静态之后，就开始出现404了，因为地址重写出错。开始的时候跳转是通过cate=id的参数来跳转的，但是伪静态之后，cate变成了category-id.html，因为zblog的静态管理中心的伪静态规则是这样的，那既然这样，我就直接把点击事件的跳转地址改成category-id.html即可。（这个问题在模块代码中已经解决了）
  • 分类页面切换排序出现404，分类页面点击 当前位置：首页 > 分类名称 里的分类名称时404。这个问题其实也是伪静态URL重写出了问题，我们在访问分类页面的时候访问的是带参数cate=id的URL，例如：https://www.example.com/?cate=4，但是当我们切换排序的时候，URL被重写成：https://www.example.com/?order=newlist&sort=0，分类参数丢失导致404。其实也是cate=id参数变成了category-id。这个问题通过上面第一种情况的设置可以解决。
  • 从顶部分类访问分类页面，点击侧栏的最近发表出现404。这个问题也是URL重写的问题，很简单：
  1. 打开zblog后台页面，选择分类管理
  2. 点击导航管理
  3. 把各个分类的连接改成诸如：https://www.example.com/category-2.html的格式
  • 点击标签404，我本人使用静态规则：{%host%}tags-{%id%}{%page%}.html，出现过404，页出现过id参数乱码，后来经过验证，发现是CDN缓存中的内容版本不是最新的所导致的，把{%host%}tags-{%alias%}{%page%}.html这个规则中的alias别名参数解析到了上面那个规则的id参数的地方导致出错404.

可戳原文链接打开我的个人博客查看效果

原文链接：林之风

这篇关于给zblog网站做个统计图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/609338。

相关文章

速盾高防cdn是怎么解决网站攻击的？

速盾高防cdn是怎么解决网站攻击的？

速盾高防CDN是一种基于云计算技术的网络安全解决方案，可以有效地保护网站免受各种网络攻击的威胁。它通过在全球多个节点部署服务器，将网站内容缓存到这些服务器上，并通过智能路由技术将用户的请求引导到最近的服务器上，以提供更快的访问速度和更好的网络性能。 速盾高防CDN主要采用以下几种方式来解决网站攻击： 分布式拒绝服务攻击(DDoS)防护：DDoS攻击是一种常见的网络攻击手段，攻击者通过向目标网
阅读更多...
49个权威的网上学习资源网站

49个权威的网上学习资源网站

艺术与音乐 Dave Conservatoire — 一个完全免费的音乐学习网站，口号是“让每一个人都可以接受世界级的音乐教育”，有视频，有练习。 Drawspace — 如果你想学习绘画，或者提高自己的绘画技能，就来Drawspace吧。 Justin Guitar — 超过800节免费的吉他课程，有自己的app，还有电子书、DVD等实用内容。 数学，数据科学与工程 Codecad
阅读更多...
BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查

BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查

9月初安全团队披露bt天堂网站挂马事件，该网站被利用IE神洞CVE-2014-6332挂马，如果用户没有打补丁或开启安全软件防护，电脑会自动下载执行大灰狼远控木马程序。 鉴于bt天堂电影下载网站访问量巨大，此次挂马事件受害者甚众，安全团队专门针对该木马进行严密监控，并对其幕后真凶进行了深入调查。 一、“大灰狼”的伪装 以下是10月30日一天内大灰狼远控的木马样本截图，可以看到该木马变种数量不
阅读更多...
PHP抓取网站图片脚本

PHP抓取网站图片脚本

方法一： <?phpheader("Content-type:image/jpeg"); class download_image{function read_url($str) { $file=fopen($str,"r");$result = ''; while(!feof($file)) { $result.=fgets($file,9999); } fclose($file); re
阅读更多...
使用WebP解决网站加载速度问题，这些细节你需要了解

使用WebP解决网站加载速度问题，这些细节你需要了解

说到网页的图片格式，大家最常想到的可能是JPEG、PNG，毕竟这些老牌格式陪伴我们这么多年。然而，近几年，有一个格式悄悄崭露头角，那就是WebP。很多人可能听说过，但到底它好在哪？你的网站或者项目是不是也应该用WebP呢？别着急，今天咱们就来好好聊聊WebP这个图片格式的前世今生，以及它值不值得你花时间去用。 为什么会有WebP？ 你有没有遇到过这样的情况？网页加载特别慢，尤其是那
阅读更多...
黑客为什么不黑赌博网站来搞米？

黑客为什么不黑赌博网站来搞米？

攻击了，只是你不知道而已！ 同样，对方也不会通知你，告诉你他黑了赌博网站。 攻击赌博网站的不一定是正义的黑客，也可能是因赌博输钱而误入歧途的法外狂徒。之前看过一个警方破获的真实案件：28岁小伙因赌博无法提款自学成为黑客，攻击境外博彩网站日进万元，最终因涉嫌非法控制计算机信息系统罪被捕。 我见过很多因赌博输钱想请黑客帮忙渗透网站的人，在被拒后，同样也有人生出极端心理，问我怎么学习黑客，想学成之
阅读更多...
提升PrestaShop外贸电商网站安全的几款行业必备工具

提升PrestaShop外贸电商网站安全的几款行业必备工具

提升PrestaShop外贸电商网站安全的几款行业必备工具 PrestaShop发展历程 PrestaShop是一款优秀且强大的外贸开源电商软件，我们开始使用PrestaShop始于2009年，那时PrestaShop还是0.9版本：界面清新，性能强悍，扩展友好等特性，既没有Magento的笨重，也没有ZenCart的古老，更没有OpenCart的脆弱，因此PrestaShop如雨后春笋，迅速
阅读更多...
zblog自定义关键词和描述，zblog做seo优化必备插件

zblog自定义关键词和描述，zblog做seo优化必备插件

zblog自定义关键词和描述，zblog做seo优化必备插件     首先说下用到的一款插件：CustomMeta自定义数据字段 ，我们这里用到的版本是1.1，1.1+版增加了列表页标签支持！     插件介绍：文章,分类等添加自定义数据字段。1.1+版适用于 Z-Blog 2.0 B2以上版本。     在zblog2.0beta1里面，这个插件是集成到了程序里面，beta2里面默认没有了
阅读更多...
推荐练习键盘盲打的网站

推荐练习键盘盲打的网站

对于初学者来说，以下是一些推荐的在线打字练习网站： 打字侠：这是一个专业的在线打字练习平台，提供科学合理的课程设置和个性化学习计划，适合各个水平的用户。它还提供实时反馈和数据分析，帮助你提升打字速度和准确度。 dazidazi.com：这个网站提供了基础的打字练习，适合初学者从零开始学习打字。 Type.fun打字星球：提供了丰富的盲打课程和科学的打字课程设计，还有诗词歌赋、经典名著等多样
阅读更多...
使用jetty和mongodb做个简易文件系统

使用jetty和mongodb做个简易文件系统

使用jetty和mongodb做个简易文件系统 - ciaos 时间 2014-03-09 21:21:00   博客园-所有随笔区 原文   http://www.cnblogs.com/ciaos/p/3590662.html 主题  MongoDB  Jetty  文件系统 依赖库： 1，jetty（提供http方式接口） 2，mongodb的java驱动（访问mo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2