数据可视化

本页面展示翻墙工具的各种可视化数据，帮助你更直观地理解和对比不同工具。

开发中

可视化图表功能正在开发中。完整的交互式图表将在后续版本中推出。

📊 可用数据

我们已经准备了以下 6 个完整的可视化数据集：

1. 性能对比图

数据文件: data/visualizations/performance-comparison.json

包含内容：

• 吞吐量对比（下载速度）
• 延迟对比（ping 测试）
• 资源占用对比
• 综合效率评分

适合图表类型：柱状图、雷达图

2. 多维度评分雷达图

数据文件: data/visualizations/ratings-radar.json

包含内容：

• 5 个评分维度：隐蔽性、性能、稳定性、易用性、安全性
• 10 个工具的完整评分
• 按场景分组对比

适合图表类型：雷达图

3. 技术演进时间线

数据文件: data/visualizations/timeline-visualization.json

包含内容：

• 1998-2024 年的 17 个重大事件
• 6 个技术世代定义
• 工具发布时间轴

适合图表类型：时间线图、甘特图

4. 工具关系图谱

数据文件: data/visualizations/tool-relationships.json

包含内容：

• 20 个节点（工具、协议、技术）
• 15 个关系连接
• 6 种关系类型

适合图表类型：力导向图、网络图

5. 世代演进图

数据文件: data/visualizations/generation-evolution.json

包含内容：

• 6 个世代的详细信息
• 世代流向数据
• 技术趋势时间序列

适合图表类型：桑基图、堆叠面积图

6. 使用场景矩阵

数据文件: data/visualizations/use-case-matrix.json

包含内容：

• 8 个使用场景
• 10 个工具的适配度评分
• 详细推荐理由

适合图表类型：热力图、矩阵图

---

📈 简化版数据展示

在完整的交互式图表开发完成之前，你可以查看以下静态对比：

性能排行榜

吞吐量（下载速度）

排名	工具	速度	评分
1	Xray (XTLS)	98 Mbps	⭐⭐⭐⭐⭐
2	Hysteria 2	97 Mbps	⭐⭐⭐⭐⭐
3	WireGuard	95 Mbps	⭐⭐⭐⭐⭐
4	Trojan	94 Mbps	⭐⭐⭐⭐⭐
5	Shadowsocks	90 Mbps	⭐⭐⭐⭐

延迟（Ping）

排名	工具	延迟	评分
1	WireGuard	170 ms	⭐⭐⭐⭐⭐
2	Hysteria 2	175 ms	⭐⭐⭐⭐⭐
3	Xray	180 ms	⭐⭐⭐⭐⭐
4	Trojan	185 ms	⭐⭐⭐⭐
5	NaiveProxy	190 ms	⭐⭐⭐⭐

多维度评分对比

工具	隐蔽性	性能	稳定性	易用性	安全性	综合
Xray Reality	5	5	5	3	5	4.9
Trojan	5	5	5	4	5	4.9
Hysteria 2	4	5	4	4	5	4.6
NaiveProxy	5	4	5	3	5	4.2
WireGuard	2	5	5	4	5	4.8

---

🛠️ 使用数据文件

所有可视化数据都是 JSON 格式，可以直接在你的项目中使用。

数据文件位置

data/visualizations/
├── performance-comparison.json    # 性能对比
├── ratings-radar.json             # 多维评分
├── timeline-visualization.json    # 时间线
├── tool-relationships.json        # 关系图
├── generation-evolution.json      # 世代演进
├── use-case-matrix.json           # 场景矩阵
└── README.md                      # 使用文档

快速开始

读取数据：

// Node.js
const data = require('./data/visualizations/performance-comparison.json')

// ES Module
import data from './data/visualizations/performance-comparison.json'

// 浏览器
fetch('/data/visualizations/performance-comparison.json')
  .then(res => res.json())
  .then(data => console.log(data))

使用 ECharts：

<template>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import performanceData from '@data/visualizations/performance-comparison.json'

const chartRef = ref(null)

onMounted(() => {
  const chart = echarts.init(chartRef.value)

  const option = {
    title: { text: '性能对比' },
    xAxis: {
      type: 'category',
      data: performanceData.throughput.data.map(item => item.tool)
    },
    yAxis: { type: 'value' },
    series: [{
      data: performanceData.throughput.data.map(item => item.value),
      type: 'bar'
    }]
  }

  chart.setOption(option)
})
</script>

---

📚 更多资源

• 完整对比分析 - 详细的文字对比
• 场景推荐 - 根据需求推荐工具
• 工具文档 - 每个工具的详细文档
• 可视化数据说明 - GitHub 上的完整文档

---

提示

完整的交互式图表功能正在开发中。如果你熟悉前端开发，欢迎贡献代码！

🎯 数据说明

所有性能数据基于以下测试环境：

• 服务器: VPS 2C4G, 100Mbps 带宽
• 客户端: MacBook Pro M1
• 网络: 中国电信 100Mbps
• 测试日期: 2024年11月

实际性能会因环境而异，数据仅供参考。