# 可视化图表模板库

本文件包含所有用于 SEO 和 GEO 报告的图表模板和代码示例。

## 📊 图表类型索引

1. [折线图（趋势分析）](#1-折线图趋势分析)
2. [柱状图（对比分析）](#2-柱状图对比分析)
3. [饼图（分布分析）](#3-饼图分布分析)
4. [热力图（机会分析）](#4-热力图机会分析)
5. [漏斗图（转化分析）](#5-漏斗图转化分析)
6. [雷达图（多维度分析）](#6-雷达图多维度分析)

---

## 1. 折线图（趋势分析）

### 用途
展示时间序列数据的变化趋势，适合显示：
- AI 引用次数变化
- GEO 评分趋势
- 流量增长曲线
- 竞争对手对比趋势

### Markdown 模板

```markdown
## {图表标题}

**数据来源：** {来源说明}
**时间周期：** {开始日期} 至 {结束日期}
**数据类型：** {数据类型}

```
{Y轴标签}
{最大值} │                         {数据点}
    │                     {数据点}
    │                 {数据点}
{中间值} │             {数据点}
    │         {数据点}
    │     {数据点}
{最小值} │ {数据点}
    │
  0 └────────────────────────────
    {时间轴标签}

{图例说明}
```

**关键洞察：**
- {洞察点 1}
- {洞察点 2}
- {洞察点 3}
```

### HTML/Chart.js 模板

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: [{时间轴数据}],
        datasets: [{
            label: '{数据集1名称}',
            data: [{数据点1}],
            borderColor: '#00FF00',
            backgroundColor: 'rgba(0, 255, 0, 0.1)',
            tension: 0.4,
            fill: true
        }, {
            label: '{数据集2名称}',
            data: [{数据点2}],
            borderColor: '#FF6B6B',
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '{Y轴标签}'
                }
            },
            x: {
                title: {
                    display: true,
                    text: '{X轴标签}'
                }
            }
        }
    }
});
</script>
```

### 实际示例

```markdown
## AI 引用趋势（30 天）

**数据来源：** GEO 引用监控系统
**时间周期：** 2024-01-15 至 2024-02-15
**数据类型：** 日度引用次数

```
引用次数
250 │                         ●
    │                     ●
    │                 ●
200 │             ●
    │         ●
    │     ●
150 │ ●
    │
    │
100 │
    │
    │
 50 │
    │
  0 └────────────────────────────
    D1  D5  D10 D15 D20 D25 D30

ChatGPT ─●─●─●─●─●─●─●─●─●─●─ (增长 +18%)
Claude ────●─●─●─●─●─●─●─●─ (增长 +22%)
Perplexity ──●─●─●─●─●─●─●─ (增长 +15%)
Google SGE ─●─●─●─●─●─●─ (稳定)
```

**关键洞察：**
- Claude 增长最快（+22%），内容结构优化效果显著
- Google SGE 增长停滞，需要添加结构化数据
- 整体趋势向上，月度增长 +18%
```

---

## 2. 柱状图（对比分析）

### 用途
对比不同类别或维度的数据，适合显示：
- 各引擎 GEO 评分对比
- 你们 vs 竞争对手
- 内容类型表现
- 关键词排名对比

### Markdown 模板

```markdown
## {图表标题}

| 类别 | 指标1 | 指标2 | 差距 |
|------|------|------|------|
| {类别1} | {值1} | {值2} | {差距} |
| {类别2} | {值1} | {值2} | {差距} |
| {类别3} | {值1} | {值2} | {差距} |

可视化：
{类别1}:    {进度条1} {值1}
{类别2}:    {进度条2} {值2}
{类别3}:    {进度条3} {值3}
```

### HTML/Chart.js 模板

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [{类别1}, {类别2}, {类别3}],
        datasets: [{
            label: '{数据集1}',
            data: [{值1}, {值2}, {值3}],
            backgroundColor: 'rgba(76, 175, 80, 0.8)',
            borderColor: 'rgba(76, 175, 80, 1)',
            borderWidth: 1
        }, {
            label: '{数据集2}',
            data: [{值1}, {值2}, {值3}],
            backgroundColor: 'rgba(255, 152, 0, 0.8)',
            borderColor: 'rgba(255, 152, 0, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 100,
                title: {
                    display: true,
                    text: '{Y轴标签}'
                }
            }
        }
    }
});
</script>
```

### 实际示例

```markdown
## 各引擎 GEO 评分对比

| 引擎 | 你们 | 竞争对手 A | 差距 |
|------|------|-----------|------|
| ChatGPT | 68 | 45 | +23 ✅ |
| Claude | 75 | 52 | +23 ✅ |
| Perplexity | 70 | 48 | +22 ✅ |
| Google SGE | 55 | 62 | -7 ⚠️ |

可视化：
ChatGPT:    ████████████████████████████ 68
Claude:     █████████████████████████████ 75
Perplexity: █████████████████████████████ 70
Google SGE: ███████████████████ 55

竞争对手 A: ████████████████████████ 45
            ████████████████████ 52
            ██████████████████ 48
            ████████████████████████ 62

**竞争地位：**
- ✅ 领先 3 个引擎
- ⚠️ Google SGE 需要优化
- 🎯 总体领先 61 分
```

---

## 3. 饼图（分布分析）

### 用途
展示分类数据的占比分布，适合显示：
- 内容类型分布
- 引用来源分布
- 社交媒体平台占比
- 流量渠道分布

### Markdown 模板

```markdown
## {图表标题}

| 类型 | 数量 | 占比 |
|------|------|------|
| {类型1} | {数量} | {百分比}% |
| {类型2} | {数量} | {百分比}% |
| {类型3} | {数量} | {百分比}% |

可视化饼图：
{类型1}     {进度条} {百分比}%
{类型2}     {进度条} {百分比}%
{类型3}     {进度条} {百分比}%
```

### HTML/Chart.js 模板

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [{类型1}, {类型2}, {类型3}],
        datasets: [{
            data: [{数值1}, {数值2}, {数值3}],
            backgroundColor: [
                'rgba(76, 175, 80, 0.8)',
                'rgba(33, 150, 243, 0.8)',
                'rgba(255, 152, 0, 0.8)'
            ],
            borderColor: [
                'rgba(76, 175, 80, 1)',
                'rgba(33, 150, 243, 1)',
                'rgba(255, 152, 0, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'right',
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        if (label) {
                            label += ': ';
                        }
                        label += context.parsed + '%';
                        return label;
                    }
                }
            }
        }
    }
});
</script>
```

### 实际示例

```markdown
## 内容类型分布

| 类型 | 数量 | 占比 |
|------|------|------|
| 指南教程 | 45 | 45% |
| 案例研究 | 25 | 25% |
| 新闻资讯 | 15 | 15% |
| 工具页面 | 10 | 10% |
| 产品页面 | 5 | 5% |

可视化：
指南教程     ████████████████████████████████ 45%
案例研究     ████████████████████ 25%
新闻资讯     ██████████ 15%
工具页面     ██████ 10%
产品页面     ███ 5%

**洞察：**
- ✅ 指南类内容占主导（AI 引用率最高）
- ✅ 案例研究充足（25%）
- ⚠️ 产品页面不足，需要增加教育性内容
```

---

## 4. 热力图（机会分析）

### 用途
展示二维矩阵数据，识别机会，适合显示：
- 搜索量 vs 竞争度
- AI 引用潜力矩阵
- 优先级矩阵
- 风险评估矩阵

### Markdown 模板

```markdown
## {图表标题}

|        | 列1 | 列2 | 列3 |
|--------|------|------|------|
| 行1 | {值1} | {值2} | {值3} |
| 行2 | {值4} | {值5} | {值6} |
| 行3 | {值7} | {值8} | {值9} |

图例：
🟢 高机会（>70）
🟡 中机会（40-70）
🔴 低机会（<40）
```

### 实际示例

```markdown
## 关键词机会分析（搜索量 vs 竞争度）

|        | 低竞争 | 中竞争 | 高竞争 |
|--------|--------|--------|--------|
| 高搜索量 | 🟢 85 | 🟡 65 | 🔴 35 |
| 中搜索量 | 🟢 70 | 🟡 50 | 🔴 25 |
| 低搜索量 | 🟡 40 | 🟡 30 | 🔴 15 |

图例：
🟢 高机会（优先创建）>70
🟡 中机会（考虑创建）40-70
🔴 低机会（暂不创建）<40

**策略建议：**
1. 🔴 **立即创建：** "高搜索量 + 低竞争"（85）
   - 预期引用：45 次/月
   - 预期流量：2,500 访客/月

2. 🟡 **本周创建：** "高搜索量 + 中竞争"（65）
   - 预期引用：32 次/月
   - 预期流量：1,800 访客/月

3. 🟡 **月内创建：** "中搜索量 + 低竞争"（70）
   - 预期引用：28 次/月
   - 预期流量：1,200 访客/月
```

---

## 5. 漏斗图（转化分析）

### 用途
展示分步转化流程，适合显示：
- 内容转化漏斗
- 用户旅程
- SEO 转化路径
- AI 引用转化

### Markdown 模板

```markdown
## {图表标题}

```
{阶段1} {数量1} ({百分比1}%)
  └─ {流失率1}% 流失率
{阶段2} {数量2} ({百分比2}%)
  └─ {流失率2}% 流失率
{阶段3} {数量3} ({百分比3}%)
  └─ {流失率3}% 流失率
{阶段4} {数量4} ({百分比4}%)
```

总体转化率：{最终百分比}%
```

### 实际示例

```markdown
## 内容转化漏斗

```
访客 10,000 (100%)
  └─ 40% 流失率
浏览内容 6,000 (60%)
  └─ 60% 流失率
停留 >30s 2,400 (24%)
  └─ 50% 流失率
社交分享 1,200 (12%)
  └─ 60% 流失率
回访 480 (4.8%)
```

总体转化率：4.8%

**优化建议：**
1. 🔴 **减少初期流失**（40% → 30%）
   - 优化标题和元描述
   - 提高页面加载速度
   - 改善移动端体验

2. 🟡 **增加社交分享**（12% → 20%）
   - 添加分享按钮
   - 创建可引用的片段
   - 优化分享时机

3. 🟢 **提升回访率**（4.8% → 8%）
   - 添加订阅功能
   - 定期内容更新
   - 邮件营销
```

---

## 6. 雷达图（多维度分析）

### 用途
展示多个维度的综合表现，适合显示：
- 6 维度 GEO 评分
- 竞争对手多维对比
- 内容质量评估
- 技能评估

### HTML/Chart.js 模板

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'radar',
    data: {
        labels: [{维度1}, {维度2}, {维度3}, {维度4}, {维度5}, {维度6}],
        datasets: [{
            label: '{数据集1}',
            data: [{值1}, {值2}, {值3}, {值4}, {值5}, {值6}],
            backgroundColor: 'rgba(76, 175, 80, 0.2)',
            borderColor: 'rgba(76, 175, 80, 1)',
            pointBackgroundColor: 'rgba(76, 175, 80, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(76, 175, 80, 1)'
        }, {
            label: '{数据集2}',
            data: [{值1}, {值2}, {值3}, {值4}, {值5}, {值6}],
            backgroundColor: 'rgba(255, 152, 0, 0.2)',
            borderColor: 'rgba(255, 152, 0, 1)',
            pointBackgroundColor: 'rgba(255, 152, 0, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255, 152, 0, 1)'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            r: {
                beginAtZero: true,
                max: 100,
                ticks: {
                    stepSize: 20
                }
            }
        }
    }
});
</script>
```

### 实际示例

```markdown
## 6 维度 GEO 评分对比

**图表类型：** 雷达图
**数据源：** GEO 审计系统

| 维度 | 你们 | 竞争对手 A | 差距 |
|------|------|-----------|------|
| 权威性 | 42 | 55 | -13 |
| 实体关系 | 68 | 45 | +23 ✅ |
| 内容结构 | 55 | 60 | -5 |
| 数据质量 | 75 | 70 | +5 ✅ |
| 引用密度 | 60 | 50 | +10 ✅ |
| 技术优化 | 50 | 65 | -15 |

**可视化：**（见 HTML 报告中的雷达图）

**关键洞察：**
- ✅ **优势：** 实体关系、数据质量、引用密度
- ⚠️ **劣势：** 权威性（-13）、技术优化（-15）
- 🎯 **快速优化：** 添加作者 Schema (+13)

**优化优先级：**
1. 🔴 权威性：添加作者信息和引用来源
2. 🔴 技术优化：添加 Schema.org 标记
3. 🟡 内容结构：优化段落长度
```

---

## 📋 图表使用指南

### 选择合适的图表类型

**展示趋势：** 使用折线图
**对比数据：** 使用柱状图
**分布比例：** 使用饼图
**机会分析：** 使用热力图
**转化流程：** 使用漏斗图
**多维评估：** 使用雷达图

### 图表设计原则

1. **清晰性：** 确保数据易读易懂
2. **准确性：** 数据准确无误
3. **一致性：** 颜色、样式保持一致
4. **简洁性：** 避免过度装饰
5. **交互性：** HTML 图表支持交互

### 颜色方案

**成功/增长：** 绿色（#4CAF50）
**警告/注意：** 橙色（#FF9800）
**危险/下降：** 红色（#F44336）
**信息/中性：** 蓝色（#2196F3）
**高亮/强调：** 紫色（#9C27B0）

---

**模板版本：** 1.0.0
**最后更新：** 2024-01-15
**维护者：** report-generator skill
