本文系轉載，轉載鏈接：ECharts+WordPress 實現評論統計，餅圖 / 折線圖 / 柱狀圖都有

“數據可視化就像給枯燥的數據‘裝上話筒’，讓原本沉默的數字能清晰‘講述’故事。”

如果你想在 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），甚至加交互效果（比如點擊柱子顯示更多詳情）。只要不改動核心的查詢語句和圖表初始化邏輯，怎麼調都不會影響功能。