一、简介

在开发中，UV（独立访客）和 PV（页面浏览量）是衡量网站流量与用户行为的重要指标。通过这些数据，团队可以了解网站的受欢迎程度和用户的行为模式。那么，如何不仅准确统计这些数据，还能将它们以直观的方式展示出来呢？本文将带你从后端数据统计到前端可视化展示，完整地讲解如何通过 ECharts 将 UV 和 PV 数据生动地呈现出来。无论你是刚接触这类分析，还是想提升项目中的可视化效果，这篇文章都将为你提供实用的指导。

二、从 UV 和 PV 开始：流量数据到底是什么？

在统计 UV（Unique Visitors）、PV（Page Views）和 IP（Internet Protocol Address）之前，先简单了解它们的含义。

UV 侧重用户数量，PV 反映用户行为，IP 则提供网络来源信息。接下来，我们将介绍如何通过后端统计这些数据并实现可视化展示。

三、后端统计：UV 和 PV 数据的获取方式日志分析法：从服务器日志中提取流量数据

使用日志分析法统计 UV 和 PV 是常见的后端方案，通常基于服务器自动生成的访问日志。这些日志记录了每一次请求的详细信息，包括 IP 地址、访问时间、请求的 URL 等。通过解析这些日志，可以统计出网站的访问量和用户行为，如图:

日志可选来源ELK（Elasticsearch, Logstash, Kibana） ：一个强大的开源日志收集、存储和可视化分析套件。Fluentd：开源的数据收集器，支持将日志从多种来源发送到不同存储系统。Graylog：集中化日志管理平台，提供实时日志分析和搜索功能。Splunk：企业级日志分析平台，支持实时日志数据的采集、分析和可视化。Prometheus：主要用于监控的系统，可收集时间序列数据并结合 Grafana 进行日志可视化。本地日志记录：服务器自动生成的日志文件，简单易用，适合小规模项目。我们选择最简单的一种 : 统计本地日志记录

本地日志记录通常包含模块、用户信息、IP 地址、时间戳、请求 URL 等关键信息。通过分析这些日志，我们可以从中提取访问量（PV）、独立访客数（UV）和独立 IP 数。

在 MyBatis 中，我们可以通过编写如下 SQL 查询，通过时间范围过滤日志，获取每天的 PV、UV 和 IP 信息：

<select id="getVisitData" resultType="com.yf.model.bo.VisitCount">
    SELECT DATE_FORMAT(create_time, '%Y-%m-%d') AS date,
        COUNT(*) AS pvCount,
        COUNT(DISTINCT operator_name) AS uvCount,
        COUNT(DISTINCT operator_ip) AS ipCount
    FROM operate_log
    WHERE create_time BETWEEN #{startDateTime}
      AND #{endDateTime}
    GROUP BY DATE_FORMAT(create_time, '%Y-%m-%d')
select>

这样可以简单高效地统计每日的访问情况。

统一拦截法：利用请求拦截与 Redis 进行高效实时统计

在项目中，可以通过在 Nginx、网关或应用层的拦截器进行请求拦截，统计 PV（页面访问量）、UV（独立访客数）和 IP。需要注意的是，在分布式环境下，统计数据需要去重，确保同一请求仅统计一次。

在 Redis 中如何存储 UV、PV 和 IPPV（页面访问量） ：每次访问时，将 PV 计数器递增。Redis 可以通过原子操作INCR实现。UV（独立访客数） ：UV 可以使用 Redis 的 HyperLogLog 数据结构，HyperLogLog 支持不精确但高效的基数估算，适合统计大量用户的去重数据。IP：独立 IP 可以使用 Redis 的SET结构存储每个请求的 IP 地址，然后使用SADD来存储新 IP，通过SCARD获取独立 IP 的总数量。案例1. 存储 PV（页面访问量）

每次请求时，对 PV 计数器执行原子递增操作：

INCR page:views:count

获取 PV：

GET page:views:count

2. 存储 UV（独立访客数）

利用 Redis 的 HyperLogLog 来存储独立访客：

PFADD page:views:uv {user_id}

获取 UV：

PFCOUNT page:views:uv

3. 存储独立 IP

将访问者的 IP 地址存储在 Redis 的SET中，以去重计算独立 IP 数：

SADD page:views:ips {user_ip}

获取独立 IP 数量:

GET page:views:count

Redis 数据归档！！！

在每日定时任务（如 Spring Task、XXL-Job）中，将当天的 PV、UV、IP 数据归档存入数据库，并清除 Redis 中的计数器，确保新一天的统计正常开始。

四、前端展示：用 ECharts 将数据生动可视化

在前端页面中使用 ECharts 创建一个折线图，展示后端返回的 PV（浏览量）、UV（用户量）和 IP（访客量）数据。以下是一个简单的 ECharts 折线图模板，您可以将后端的 IP、UV、PV 数据填入对应位置进行展示。

ECharts 折线图配置

可以使用我之前编写的 useECharts 对 ECharts 进行展示。

文章链接 : 不要再编写冗余的ECharts代码了，带你封装一个EChatrs Hook

{
    tooltip: {
        trigger: "axis",
    },
    legend: {
        data: ["浏览量(PV)", "用户量(UV)", "访客量(IP)"],
        bottom: 0,
    },
    grid: {
        left: "1%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        data: [],  // 后端返回的日期数据
    },
    yAxis: {
        type: "value",
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed",
            },
        },
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: "浏览量(PV)",
            type: "line",
            data: [],  // 后端返回的 PV 数据
            areaStyle: {
                color: "rgba(64, 158, 255, 0.1)",
            },
            smooth: true,
            itemStyle: {
                color: "#4080FF",
            },
            lineStyle: {
                color: "#4080FF",
            },
        },
        {
            name: "用户量(UV)",
            type: "line",
            data: [],  // 后端返回的 UV 数据
            areaStyle: {
                color: "rgba(103, 194, 58, 0.1)",
            },
            smooth: true,
            itemStyle: {
                color: "#67C23A",
            },
            lineStyle: {
                color: "#67C23A",
            },
        },
        {
            name: "访客量(IP)",
            type: "line",
            data: [],  // 后端返回的 IP 数据
            areaStyle: {
                color: "rgba(103, 194, 58, 0.1)",
            },
            smooth: true,
            itemStyle: {
                color: "#E6A03E",
            },
            lineStyle: {
                color: "#E6A03E",
            },
        },
    ],
}

后端返回数据示例

后端接口返回的 PV、UV、IP 数据格式如下：

{
    "data": {
        "dates": ["2024-09-12", "2024-09-13", "2024-09-14", "2024-09-15", "2024-09-16", "2024-09-17", "2024-09-18"],
        "ipList": [4, 2, 0, 0, 0, 0, 15],
        "pvList": [23, 11, 0, 0, 0, 0, 49],
        "uvList": [3, 3, 0, 0, 0, 0, 2]
    }
}

展示效果

五、结束语 & 源码

本文展示了使用 Redis 实现实时统计 PV、UV、IP 的方法，并通过 ECharts 将这些数据可视化呈现。通过这种方案，您可以高效管理并监控网站的流量，确保数据准确性和实时性。

为了简洁起见，本文仅包含了核心代码及实例说明。更多详细信息和完整的代码实现，欢迎访问项目的源码仓库：源码地址。

感谢阅读！