我们在运营自己的网站的时候，很多时候我们希望能够掌握自己网站的数据，包括网站的访客数量、网站中各分类的文章数量、各个月份的文章数量等。而且很多时候我们不希望我们拿到的是冷冰冰的数据，而是一目了然的数据。这时候数据可视化就非常有用了，如果我们能够通过图表来让自己的网站的数据一目了然，岂不美哉？
现在网络上的前端图表库其实并不少，并且很多都是开源的，也就是说，你可以直接拿来用，而不需要付费。其中最有名气的当属由百度主导的echarts项目，现在该项目已经在Apache开源基金会孵化中。echarts是一个非常好用的图表库，不需要什么前置技能，只需要懂一点点JavaScript和json语法即可使用。echarts的图表数据使用json进行渲染。
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
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><script type="text/javascript" src="@5/dist/echarts.min.js"></script></head><body><div id="root" style="width: 600px;height: 400px;"></div><script>var myChart = echarts.ElementById('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.ElementById('root'))
是根据id获取到div标签，然后用这个标签作为容器来初始化echarts图表。
以下这句是把图表放置到容器中
myChart.setOption(option)
zblog是有官方文档的，可以去官方文档中去查看相关的API：接口文档 - API (zblogcn)
这里我们只用到一个API即可：
请求格式：.php?mod=category&act=list，把example换成你自己的域名即可。
请求之后会返回json格式的数据，类似这样的：
然后我们复制这些文本，打开网站json，解析一下json数据，查看json的结构，以便进行json解析。
可以看到，这个json对象中有一个data对象，data对象中又有一个list数组，这个数组列出了网站的所有分类的ID和分类名称，以及分类下的文章数量等：
那么我们可以想想我们需要哪些数据呢？很显然，我们只需要分类名称和该分类下的文章数量即可构建一个饼图。
而echarts图表的配置项实际上也是一个json对象，所以这就很简单了。
思路如下
我们只需要在我们的网站的页面加载时，请求API获取文章分类数据，然后把返回的json字符串转换成json对象（只有json对象才能解析），然后把解析出来的只赋值给option对象的相应值即可。
打开zblog后台页面
zblogphp：.php
点击网站设置->API设置->启用API协议
点击模块管理，再点击新建模块，然后复制以下代码到zblog“正文”的编辑框里面（把代码中的example换成你自己的网站域名），名称、文件名、HTML ID自己随便填，类型选择div，其它不管，提交即可。
<!-- 模块代码 -->
<script type="text/javascript" src="@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 = ElementById('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改成你的网站域名，其它的，包括上面的都不用改//这里全部代码只改这一处即可，这是最简单的方法了，而且效果还挺好的，改好域名直接保存用浏览器访问const url = '.php?mod=category&act=list'Http.open('GET',url)Http.send()adystatechange=function(){if (adyState == 4 && this.status==200){var JSONObject = JSON.sponseText)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)}}}load = ('click',function(params){var cateId = params.dataIndex+2window.location.href = ''+window.location.host+'/category-'+cateId+'.html'// console.log(window.location.host+'?cate='+cateId)})option && myChart.setOption(option);</script>
可戳原文链接打开我的个人博客查看效果
原文链接：林之风
本文发布于:2024-01-29 01:37:25，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170646344811783.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
