“数据可视化就像给枯燥的数据‘装上话筒’，让原本沉默的数字能清晰‘讲述’故事。”
如果你想在 WordPress 博客里展示评论数据 —— 比如谁评论最活跃、每天有多少条评论，ECharts 这个工具绝对能帮上忙。今天就手把手教你用 ECharts 实现 WordPress 评论统计图，从认识工具到具体图表制作，一步一步来。
一、先认识下 ECharts：数据可视化的 “好搭档”
ECharts 是百度开发并维护的 JavaScript 数据可视化库，就像数据的 “展示设计师”—— 不仅功能强大，还特别好上手。它支持折线图、柱状图、饼图等多种图表，还能做动态交互效果，比如 ECharts 5 新增的动态排序柱状图、折线图，就是短视频里常见的 “数据变化动画”，特别直观。
对 WordPress 博主来说，用 ECharts 做评论统计，能把 “评论数”“活跃读者” 这些数据，从后台的数字变成前台的直观图表，读者看着清楚，自己也能快速掌握博客互动情况。
二、准备工作：两步搞定 “基础配置”
要在 WordPress 里用 ECharts 做评论统计，得先做好两件事：引入 ECharts 库，再获取 WordPress 的评论数据。
1. 引入 ECharts 库
就像做饭前要准备好调料，用 ECharts 前得先把它的 “核心文件” 引进来。我们用 CDN 链接直接引入，不用下载本地文件，省空间又方便，把这段代码放在 WordPress 主题的合适位置（比如 header.php 或需要展示图表的页面模板里）：
<script type="text/javascript" src="https://cdn.staticfile.net/echarts/5.4.3/echarts.min.js"></script>
2. 用 WordPress 函数获取评论数据
要做评论统计图，得先从 WordPress 数据库里把评论数据 “捞” 出来。这里用 WordPress 的$wpdb对象写查询语句，分别获取 30 天内的日评论数、9 个月内的月评论数，以及 180 天内最活跃的 8 位读者数据，代码直接用就行，不用改核心逻辑（想调整天数 / 人数，改变量值即可）：
global $wpdb;
$numbers_day = 30; // 获取30天的日评论数据
$numbers_month = 9; // 获取9个月的月评论数据
$numbers_user = 8; // 获取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);
这段代码会把获取到的数据存进$output_day（日评论）、$output_month（月评论）、$output_user（活跃读者）三个变量里，后面做图表就靠这些数据了。
三、5 种 ECharts 图表玩转评论统计
接下来就是核心部分 —— 用 ECharts 把获取到的评论数据变成图表，每种图表都有具体用途，你可以根据自己的需求选着用。
1. 饼图：看 “活跃读者” 占比
饼图最适合展示 “部分与整体的关系”，比如想知道哪几位读者评论最活跃，用饼图一眼就能看出谁的评论数占比高。
先在页面里留一个图表容器（就像给图表找个 “房子”），再写 ECharts 初始化代码：
<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>
把这段代码放在你想展示活跃读者的位置（比如博客后台统计页或前台特定页面），刷新后就能看到带交互的饼图了。
2. 折线图：看 “日评论数” 变化
折线图擅长展示 “趋势”，比如 30 天内每天的评论数是涨是跌，用折线图能清晰看到变化规律。
同样先留容器，再写代码：
<div id="chart_day" style="width:100%; height:400px;"></div>
<script type="text/javascript">
// 初始化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: { // X轴：日期
type: 'category',
boundaryGap: false,
data: [
<?php foreach (array_reverse($output_day) as $o) {echo " '" . $o->d . "',";} ?>
]
},
yAxis: { // Y轴：评论数
type: 'value'
},
series: [
{
name:'评论',
type:'line', // 图表类型：折线图
data:[
<?php foreach (array_reverse($output_day) as $o) {echo $o->cnt . ",";} ?>
]
}
]
};
// 显示图表
dayChart.setOption(option);
</script>
这里用array_reverse把日期倒过来，让最新的日期在右边，符合我们看趋势的习惯。
3. 柱状图：看 “月评论数” 对比
柱状图适合 “横向对比”，比如想知道近 9 个月每个月的评论数多少，用柱子的高度对比，直观又清楚：
<div id="chart_month" style="width: 100%;height:350px;"></div>
<script type="text/javascript">
// 初始化echarts实例
var month_Chart = echarts.init(document.getElementById('chart_month'));
// 图表配置和数据
var option = {
title: {
text: '月评论数据'
},
tooltip: {},
legend: {
data:['评论']
},
xAxis: { // X轴：月份
data: [
<?php foreach (array_reverse($output_month) as $o) echo "'" . $o->d . "',"; ?>
]
},
yAxis: {}, // Y轴：评论数（自动适配）
series: [{
name: '评论数',
type: 'bar', // 图表类型：柱状图
data: [
<?php foreach (array_reverse($output_month) as $o) echo "" . $o->cnt . ","; ?>
]
}]
};
// 显示图表
month_Chart.setOption(option);
</script>如果想给柱子换颜色，也可以在series里加itemStyle: {color: '#4895ef'}这样的配置，颜色值可以自己选。
4. 雷达图：多维度数据对比（拓展用法）
雷达图适合 “多维度对比”，虽然原文没直接用在评论统计上，但可以拓展 —— 比如对比不同月份在 “评论数、点赞数、阅读量” 等维度的表现，给大家参考代码：
<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>
如果想用到评论统计，把indicator改成 “日评论、周评论、月评论” 等维度，数据换成自己的即可。
5. 热力图：日历式数据展示（拓展用法）
热力图像 “数据调色板”，用颜色深浅表示数据大小，比如展示一年中每天的评论数，颜色深的日子评论多：
<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>
把getVirtualData里的随机数换成实际的每日评论数，range改成你想展示的年份，就能用在 WordPress 评论统计里了。
四、小提示：按需调整，让图表更 “合身”
做完图表后，你还可以根据自己的需求改配置：比如改图表标题（title.text）、调整尺寸（style里的 width 和 height）、换颜色（itemStyle.color），甚至加交互效果（比如点击柱子显示更多详情）。只要不改动核心的查询语句和图表初始化逻辑，怎么调都不会影响功能。
