之前使用Google Charts在本站创建过统计图（方法见以下文章），不知是什么原因最近发现各种统计图都不显示，以为是不小心动了某个代码，于是重新修改了一次，问题依旧。想着可能是代码冲突或者GG被qiang的原因。本着有问题必须解决的态度，想到了EChart。
WordPress评论统计图
在网络上经常会见到各种博客网站评论留言墙，但统计图表却比较少见。前段时间无意在网友“牧羊人”那里见到这个，发现非常酷，于是弄过来用上了。
Google Charts: https://developers.google.cn/charts
其实几年前大神【伍子蛇】就提过建议，只是当时技术太菜了，不敢折腾太复杂的东西。 
伍子蛇2020-06-20 09:05:25
这方法不好，建议封装一个Echat，在文章页也可以调用图表，用到的库要自己下到本地，不要调用墙外的东西，那可不用起来蛋疼。可以来看看我在文章中用的图表http://d-d.design/?p=10211
简介
ECharts是一个强大而且易于使用的数据可视化库，适用于各种项目和应用场景。ECharts（一个基于JavaScript的，以交互为特色的数据可视化图表库），它由百度开发并维护，被广泛用于构建数据可视化界面。ECharts提供了丰富的图表类型和样式，包括折线图、柱状图、饼图、散点图等，而且支持动态更新和交互操作，使得用户可以轻松地定制并呈现数据。
ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。
最近几年CSP J组第一轮晋级分数
看到这个动态排序图有没有很熟悉的感觉？没错，经常会在一些短视频中看到它。
鉴于之前折腾只涉及到饼图、折线图和柱状图，本次也将用EChart来实现同样的功能。
引入ECharts
html
<script type="text/javascript" src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>WordPress函数
php
global $wpdb;
$numbers_day = 30;
$numbers_month = 9;
$numbers_user = 8;
$query_day ="SELECT COUNT(*) AS `cnt` , DATE_FORMAT( `comment_date` , '%Y-%m-%d' ) AS d FROM $wpdb->comments GROUP BY d ORDER BY `d` DESC LIMIT 0 , " . $numbers_day;
$query_month="SELECT COUNT(*) AS `cnt` , DATE_FORMAT( `comment_date` , '%Y-%m' ) AS d FROM $wpdb->comments GROUP BY d ORDER BY `d` DESC LIMIT 0 , " . $numbers_month;
$query_user ="
SELECT
COUNT( comment_author_email ) AS number,
comment_author_email,
comment_author
FROM (
SELECT *
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts
ON ( $wpdb->posts.ID = $wpdb->comments.comment_post_ID )
WHERE
comment_date > date_sub( NOW(), INTERVAL 180 DAY )
AND user_id = '0'
AND comment_approved = '1'
ORDER BY comment_ID DESC
) AS tempcmt
GROUP BY comment_author_email
ORDER BY number DESC
LIMIT {$numbers_user}";
$output_day = $wpdb->get_results($query_day);
$output_month = $wpdb->get_results($query_month);
$output_user = $wpdb->get_results($query_user);统计图
饼图
html
<div id="chart_user" style="width:100%; height:220px"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var userChart = echarts.init(document.getElementById('chart_user'));
// 指定图表的配置项和数据
var option = {
title: {
text: '活跃读者'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '活跃读者',
type: 'pie',
radius: '55%',
data: [
<?php foreach ($output_user as $o) {echo "{value:" . $o->number . ",name:'" . $o->comment_author . "'},";} ?>
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
userChart.setOption(option);
</script>折线图
html
<div id="chart_day" style="width:100%; height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var dayChart = echarts.init(document.getElementById('chart_day'));
// 指定图表的配置项和数据
var option = {
title: {
text: '日评论数'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['评论']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
<?php foreach (array_reverse($output_day) as $o) {echo " '" . $o->d . "',";} ?>
]
},
yAxis: {
type: 'value'
},
series: [
{
name:'评论',
type:'line',
data:[
cnt . ","; ?>
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
dayChart.setOption(option);
</script>柱状图
html
<div id="chart_month" style="width: 100%;height:350px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var month_Chart = echarts.init(document.getElementById('chart_month'));
// 指定图表的配置项和数据
var option = {
title: {
text: '月评论数据'
},
tooltip: {},
legend: {
data:['评论']
},
xAxis: {
data: [
<?php foreach (array_reverse($output_month) as $o) echo "'" . $o->d . "',"; ?>
]
},
yAxis: {},
series: [{
name: '评论数',
type: 'bar',
data: [
<?php foreach (array_reverse($output_month) as $o) echo "" . $o->cnt . ","; ?>
]
}]
};
// 使用刚指定的配置项和数据显示图表。
month_Chart .setOption(option);
</script>雷达图
html
<div id="main" style="width: 100%;height:350px;"></div>
<script>var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Allocated Budget', 'Actual Spending']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending'
}
]
}
]
};
option && myChart.setOption(option);</script>
根据自己需要更改变量及参数即可。
热力图
html
<div id="main" style="width: 100%;height:350px;"></div>
<script>var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
function getVirtualData(year) {
const date = +echarts.time.parse(year + '-01-01');
const end = +echarts.time.parse(+year + 1 + '-01-01');
const dayTime = 3600 * 24 * 1000;
const data = [];
for (let time = date; time < end; time += dayTime) {
data.push([
echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
option = {
title: {
top: 30,
left: 'center',
text: 'Daily Step Count'
},
tooltip: {},
visualMap: {
min: 0,
max: 10000,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 65
},
calendar: {
top: 120,
left: 30,
right: 30,
cellSize: ['auto', 13],
range: '2016',
itemStyle: {
borderWidth: 0.5
},
yearLabel: { show: false }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: getVirtualData('2016')
}
};
option && myChart.setOption(option);
</script>
在折腾热力图时和上面几种图一起放入统计页面竟然不显示，初步怀疑可能是变量冲突，有时间再研究，于是先放入归档页面。
此时我突然有个大胆的想法——足迹地图是否也可以用这个实现呢？？？后续有时间再研究。。。
参考资料
ECharts: https://echarts.apache.org
万有引力说道： LV.0
珂泽说道： LV.0
老王说道：
Ksable说道： LV.0
阿和说道： LV.5友邻
XI说道： LV.2友邻
威言威语说道： LV.2友邻