Vibe Coding一人即团队系列62: Excel数据分析与可视化自动化

Wang's Blog2026-09-06 14:22

纲要

  • Claude 与 Skills 生态
  • XLSX Skill 的安装与使用
  • 数据理解与智能分析流程
  • ECharts 图表生成技术
  • HTML 仪表盘构建
  • Word 报告自动化生成
  • 多模型效果对比

技术背景与选型

在数据分析与可视化的常规工作流中，Excel 文件处理、数据清洗、图表生成及报告撰写通常需要多部门协作，且耗时数天。借助 Claude 的 Skills 机制，可以将上述流程整合为一条自动化流水线。

本文涉及的核心技术组件包括：

  • Claude（Anthropic）：具备文件读取与代码生成能力的大语言模型
  • XLSX Skill：Claude 官方提供的 Excel 文件读写与解析扩展
  • ECharts：百度开源的高性能 JavaScript 图表库，用于 Web 端数据可视化
  • HTML/CSS/JavaScript：构建最终仪表盘的前端技术栈
  • Word 文档生成：通过 Claude 生成结构化报告，可导出为 .docx 格式

XLSX Skill 安装与环境准备

Claude 通过 Skills 机制扩展其对特定文件格式的处理能力。XLSX Skill 是官方维护的扩展之一，用于支持 .xlsx 文件的读取、解析与数据提取。

安装方式 ：在 Claude 对话界面中，选择 Skills 管理面板，搜索并安装 XLSX 即可启用。

安装完成后，Claude 将具备以下能力：

  • 解析多 Sheet Excel 文件
  • 提取结构化数据（支持数值、文本、日期等类型）
  • 识别表头与数据行的映射关系
  • 支持数据量级：单文件数千行以内均可流畅处理

注：当前 XLSX Skill 为官方提供的基础版本，如需更复杂的格式处理（如合并单元格、自定义样式），可前往 GitHub 搜索社区贡献的高级 Skills。

数据理解：从读取到语义解析

数据分析的第一步并非生成图表，而是理解数据 。许多 AI 工具在读取 Excel 后仅做数值提取，而缺少对数据含义的深度理解。正确的做法是要求模型阅读并理解文档内容，而非仅提取原始数值。

目录结构示例

dir 复制代码 
├── 011-数据可视化/
│   ├── 个人记账.xlsx          # 原始数据文件
│   ├── index.html             # 生成的仪表盘
│   └── 运营报告.docx          # 自动生成的报告文档

数据概览

该 Excel 包含三个 Sheet 页：

Sheet 名称 内容描述 数据量
用户交易明细 用户 ID、交易金额、支付方式、交易类别等 约 400-500 条
运营分析总览 汇总统计指标（总收入、总支出、用户数等） 聚合结果
分类统计 按不同类别（社交、餐饮、数码等）汇总的交易流水 分类汇总

图表生成流程

Prompt 设计原则

在实际操作中，向 Claude 下达指令时需要明确以下几点：

  1. 明确数据源 ：通过 @ 引用上传的 Excel 文件
  2. 明确理解要求：不仅读取，还需理解数据语义
  3. 明确图表类型：可指定具体类型，也可让模型根据数据自动选择
  4. 明确输出格式：生成完整的 HTML 网页，便于浏览器直接打开
  5. 明确图表库 ：使用 ECharts 技术

核心 Prompt 示例

txt 复制代码 
请阅读并理解这份 Excel 文档中的数据内容。
根据数据特征，生成合适的图表（柱状图、饼图、折线图、雷达图等均可）。
请使用 ECharts 技术生成图表，并输出为完整的 HTML 网页。
该网页需可在浏览器中直接打开，并适合分享至局域网。

图表生成结果

Claude 在接收到指令后，会自动完成以下工作：

  1. 解析 Excel 各 Sheet 的数据
  2. 识别数值型字段与维度字段
  3. 为不同维度匹配最佳图表类型
  4. 生成包含 ECharts 渲染逻辑的 HTML 文件

生成图表清单

图表类型 展示内容 适用场景
折线图 月度收支趋势（1-5 月） 时间序列分析
柱状图 各城市消费排行榜 类别对比
饼图 支付方式分布（银行卡/现金/等） 构成比例分析
饼图 支出分类占比（社交/旅游/餐饮/数码等） 构成比例分析
饼图 收入占比（兼职/工资/投资等） 构成比例分析
雷达图 各维度收入对比 多指标综合对比

HTML 输出特征

  • 单文件 HTML，包含所有 ECharts CDN 引用
  • 图表自带动态加载动画（每次刷新重绘）
  • 所有图表统一布局于同一页面，形成数据仪表盘
  • 文件可直接在浏览器中打开，无需额外服务器

关键实现细节

ECharts 是当前 Web 端数据可视化的主流方案之一。其核心优势在于：

  • 丰富的图表类型（涵盖本文所需全部类型）
  • 良好的交互体验（悬停提示、动态更新）
  • 完善的 API 文档与社区生态
  • 支持响应式布局

ECharts 基本渲染结构

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据可视化仪表盘</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
    </script>
    <style>
        .chart-container {
            width: 100%;
            height: 400px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="chart1" class="chart-container"></div>
    <script>
        const chartDom = document.getElementById('chart1');
        const myChart = echarts.init(chartDom);
        const option = {
            // 图表配置项
            xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
            yAxis: { type: 'value' },
            series: [{
                data: [120, 200, 150, 180, 220],
                type: 'line'
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

运营报告自动化生成

完成数据可视化仪表盘后，可进一步要求 Claude 基于已有图表和分析结果，自动生成一份完整的运营报告，用于向管理层汇报。

Prompt 示例

txt 复制代码 
请根据以上数据及图表分析结果，生成一份运营报告。
报告需包含整体概况、核心指标解读、趋势分析及建议。
输出格式为 Word 文档（.docx）。

报告生成结果

Claude 自动生成包含以下章节的报告：

  1. 整体运营概况
  2. 用户数据分析
  3. 交易流水分析
  4. 收支趋势解读
  5. 城市与支付方式分布
  6. 分类支出与收入结构
  7. 总结与建议

格式说明

当前 Claude 官方提供的 Word 生成 Skill 在排版格式上较为基础。若需要更专业的排版效果（如自定义模板、页眉页脚、表格样式等），建议从 GitHub 社区获取更高级的 Skills 实现。

技术复盘与对比

完整工作流时序

报告生成 ECharts 图表库 Excel 数据源 Claude + XLSX Skill 用户 报告生成 ECharts 图表库 Excel 数据源 Claude + XLSX Skill 用户 #mermaid-svg-2fdtFQy6SgIz5xRu{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-2fdtFQy6SgIz5xRu .error-icon{fill:#552222;}#mermaid-svg-2fdtFQy6SgIz5xRu .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2fdtFQy6SgIz5xRu .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2fdtFQy6SgIz5xRu .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2fdtFQy6SgIz5xRu .marker.cross{stroke:#333333;}#mermaid-svg-2fdtFQy6SgIz5xRu svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2fdtFQy6SgIz5xRu p{margin:0;}#mermaid-svg-2fdtFQy6SgIz5xRu .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-2fdtFQy6SgIz5xRu text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-2fdtFQy6SgIz5xRu .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-2fdtFQy6SgIz5xRu .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-2fdtFQy6SgIz5xRu #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-2fdtFQy6SgIz5xRu .sequenceNumber{fill:white;}#mermaid-svg-2fdtFQy6SgIz5xRu #sequencenumber{fill:#333;}#mermaid-svg-2fdtFQy6SgIz5xRu #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-2fdtFQy6SgIz5xRu .messageText{fill:#333;stroke:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-2fdtFQy6SgIz5xRu .labelText,#mermaid-svg-2fdtFQy6SgIz5xRu .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .loopText,#mermaid-svg-2fdtFQy6SgIz5xRu .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-2fdtFQy6SgIz5xRu .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-2fdtFQy6SgIz5xRu .noteText,#mermaid-svg-2fdtFQy6SgIz5xRu .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-2fdtFQy6SgIz5xRu .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-2fdtFQy6SgIz5xRu .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-2fdtFQy6SgIz5xRu .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-2fdtFQy6SgIz5xRu .actorPopupMenu{position:absolute;}#mermaid-svg-2fdtFQy6SgIz5xRu .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-2fdtFQy6SgIz5xRu .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-2fdtFQy6SgIz5xRu .actor-man circle,#mermaid-svg-2fdtFQy6SgIz5xRu line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-2fdtFQy6SgIz5xRu :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 上传 Excel 文件并下达分析指令 读取并解析 XLSX 返回结构化数据 理解数据语义并生成图表配置 输出 HTML 页面 返回可交互仪表盘 下达报告生成指令 生成 Word 报告 返回结构化文档

方案对比

对比维度 人工处理 Claude + Skills 自动化
数据理解 需人工逐列解读 自动识别语义
图表生成 手动选择图表类型并绘制 自动匹配最优图表
代码编写 需前端开发人员介入 自动生成完整 HTML
报告撰写 需分析师手动编写 自动生成结构化报告
耗时 2-3 天 分钟级
可分享性 需额外导出 直接生成可访问链接

API 速览

本文涉及的核心技术为 ECharts 图表库。以下为相关 API 的快速参考。

ECharts 核心 API

所属库 ：echarts（CDN 或 npm 安装）

初始化实例

javascript 复制代码 
const chart = echarts.init(domElement, theme, options);
参数 类型 说明
domElement HTMLElement 图表容器 DOM 节点
theme string 可选，主题名称
options object 可选，初始化配置

设置图表选项

javascript 复制代码 
chart.setOption(option, notMerge, lazyUpdate);
参数 类型 说明
option object 图表配置项
notMerge boolean 是否不合并之前的配置
lazyUpdate boolean 是否延迟更新

响应式调整

javascript 复制代码 
window.addEventListener('resize', () => {
    chart.resize();
});

常用图表配置结构

柱状图 / 折线图通用配置

javascript 复制代码 
const option = {
    title: { text: '图表标题', subtext: '副标题' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['系列1', '系列2'] },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [
        { name: '系列1', type: 'bar', data: [10, 20, 30] },
        { name: '系列2', type: 'line', data: [15, 25, 35] }
    ]
};

饼图配置

javascript 复制代码 
const pieOption = {
    title: { text: '占比分析' },
    tooltip: { trigger: 'item' },
    legend: { data: ['类别A', '类别B', '类别C'] },
    series: [{
        type: 'pie',
        radius: '50%',
        data: [
            { value: 100, name: '类别A' },
            { value: 80, name: '类别B' },
            { value: 60, name: '类别C' }
        ]
    }]
};

雷达图配置

javascript 复制代码 
const radarOption = {
    title: { text: '多维对比' },
    radar: {
        indicator: [
            { name: '指标A', max: 100 },
            { name: '指标B', max: 100 },
            { name: '指标C', max: 100 }
        ]
    },
    series: [{
        type: 'radar',
        data: [{ value: [80, 70, 90], name: '维度对比' }]
    }]
};

Demo 示例

以下为基于本文所述流程生成的完整仪表盘 HTML 示例，该示例展示了如何将静态数据通过 ECharts 渲染为多图表组合的可视化页面。

完整 HTML 代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人记账数据仪表盘</title>
    <!-- 引入 ECharts 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
            background: #f5f7fb;
            padding: 24px;
        }
        .dashboard {
            max-width: 1440px;
            margin: 0 auto;
        }
        .header {
            margin-bottom: 28px;
        }
        .header h1 {
            font-size: 28px;
            font-weight: 600;
            color: #1a2332;
        }
        .header p {
            color: #6b7a8d;
            font-size: 14px;
            margin-top: 4px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .stat-card .label {
            font-size: 13px;
            color: #8c9aa9;
            letter-spacing: 0.3px;
        }
        .stat-card .value {
            font-size: 26px;
            font-weight: 700;
            color: #0a1a2b;
            margin-top: 4px;
        }
        .chart-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .chart-box {
            background: #ffffff;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: box-shadow 0.2s;
        }
        .chart-box:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }
        .chart-box .chart-title {
            font-size: 15px;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 10px;
            padding-left: 4px;
            border-left: 3px solid #4a90d9;
            padding-left: 12px;
        }
        .chart-container {
            width: 100%;
            height: 320px;
        }
        .full-width {
            grid-column: 1 / -1;
        }
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .chart-grid {
                grid-template-columns: 1fr;
            }
            .full-width {
                grid-column: 1;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- 头部 -->
        <div class="header">
            <h1>📊 个人记账数据分析仪表盘</h1>
            <p>数据来源：个人记账.xlsx ｜ 更新日期：2026-08-15 ｜ 图表引擎：ECharts 5.5.0</p>
        </div>

        <!-- 核心指标卡片 -->
        <div class="stats-grid">
            <div class="stat-card"><div class="label">总用户数</div><div class="value">1,284</div></div>
            <div class="stat-card"><div class="label">总交易记录</div><div class="value">487</div></div>
            <div class="stat-card"><div class="label">总收入</div><div class="value">¥328,900</div></div>
            <div class="stat-card"><div class="label">总支出</div><div class="value">¥214,300</div></div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-grid">

            <!-- 1. 月度收支趋势 - 折线图 -->
            <div class="chart-box">
                <div class="chart-title">月度收支趋势</div>
                <div id="trendChart" class="chart-container"></div>
            </div>

            <!-- 2. 城市消费榜 - 柱状图 -->
            <div class="chart-box">
                <div class="chart-title">各城市消费榜</div>
                <div id="cityChart" class="chart-container"></div>
            </div>

            <!-- 3. 支付方式分布 - 饼图 -->
            <div class="chart-box">
                <div class="chart-title">支付方式分布</div>
                <div id="paymentChart" class="chart-container"></div>
            </div>

            <!-- 4. 支出分类占比 - 饼图 -->
            <div class="chart-box">
                <div class="chart-title">支出分类占比</div>
                <div id="expenseChart" class="chart-container"></div>
            </div>

            <!-- 5. 收入占比 - 饼图 -->
            <div class="chart-box">
                <div class="chart-title">收入来源占比</div>
                <div id="incomeChart" class="chart-container"></div>
            </div>

            <!-- 6. 收入对比雷达图 -->
            <div class="chart-box">
                <div class="chart-title">各维度收入对比</div>
                <div id="radarChart" class="chart-container"></div>
            </div>

        </div>
    </div>

    <script>
        // ============================================================
        // 1. 月度收支趋势（折线图）
        // ============================================================
        const trendChart = echarts.init(document.getElementById('trendChart'));
        trendChart.setOption({
            tooltip: { trigger: 'axis' },
            legend: { data: ['收入', '支出'], bottom: 0 },
            grid: { left: 40, right: 20, top: 20, bottom: 50 },
            xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
            yAxis: { type: 'value', axisLabel: { formatter: '¥{value}' } },
            series: [{
                name: '收入',
                type: 'line',
                smooth: true,
                lineStyle: { color: '#27ae60', width: 3 },
                areaStyle: { color: 'rgba(39, 174, 96, 0.15)' },
                data: [42000, 38500, 51000, 47800, 62000]
            }, {
                name: '支出',
                type: 'line',
                smooth: true,
                lineStyle: { color: '#e74c3c', width: 3 },
                areaStyle: { color: 'rgba(231, 76, 60, 0.10)' },
                data: [28000, 31000, 26000, 34000, 29000]
            }]
        });

        // ============================================================
        // 2. 城市消费榜（柱状图）
        // ============================================================
        const cityChart = echarts.init(document.getElementById('cityChart'));
        cityChart.setOption({
            tooltip: { trigger: 'axis' },
            grid: { left: 50, right: 20, top: 20, bottom: 30 },
            xAxis: { type: 'category', data: ['上海', '北京', '深圳', '杭州', '广州', '成都'] },
            yAxis: { type: 'value', axisLabel: { formatter: '¥{value}' } },
            series: [{
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: '#4a90d9'
                },
                data: [68000, 54000, 47000, 39000, 32000, 21000]
            }]
        });

        // ============================================================
        // 3. 支付方式分布（饼图）
        // ============================================================
        const paymentChart = echarts.init(document.getElementById('paymentChart'));
        paymentChart.setOption({
            tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
            legend: { orient: 'horizontal', bottom: 0 },
            series: [{
                type: 'pie',
                radius: ['40%', '65%'],
                avoidLabelOverlap: true,
                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
                label: { show: false },
                emphasis: { scale: true },
                data: [
                    { value: 182, name: '银行卡', itemStyle: { color: '#4a90d9' } },
                    { value: 145, name: '现金', itemStyle: { color: '#27ae60' } },
                    { value: 98, name: '微信支付', itemStyle: { color: '#1abc9c' } },
                    { value: 62, name: '支付宝', itemStyle: { color: '#3498db' } }
                ]
            }]
        });

        // ============================================================
        // 4. 支出分类占比（饼图）
        // ============================================================
        const expenseChart = echarts.init(document.getElementById('expenseChart'));
        expenseChart.setOption({
            tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
            legend: { orient: 'horizontal', bottom: 0 },
            series: [{
                type: 'pie',
                radius: ['40%', '65%'],
                avoidLabelOverlap: true,
                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
                label: { show: false },
                emphasis: { scale: true },
                data: [
                    { value: 86000, name: '社交' },
                    { value: 72000, name: '旅游' },
                    { value: 58000, name: '餐饮' },
                    { value: 49000, name: '数码' },
                    { value: 31000, name: '教育' },
                    { value: 18000, name: '医疗' },
                    { value: 12000, name: '其他' }
                ]
            }]
        });

        // ============================================================
        // 5. 收入来源占比（饼图）
        // ============================================================
        const incomeChart = echarts.init(document.getElementById('incomeChart'));
        incomeChart.setOption({
            tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
            legend: { orient: 'horizontal', bottom: 0 },
            series: [{
                type: 'pie',
                radius: ['40%', '65%'],
                avoidLabelOverlap: true,
                itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
                label: { show: false },
                emphasis: { scale: true },
                data: [
                    { value: 152000, name: '工资' },
                    { value: 98000, name: '兼职' },
                    { value: 54000, name: '投资' },
                    { value: 24900, name: '其他' }
                ]
            }]
        });

        // ============================================================
        // 6. 收入对比雷达图
        // ============================================================
        const radarChart = echarts.init(document.getElementById('radarChart'));
        radarChart.setOption({
            tooltip: { trigger: 'item' },
            legend: { data: ['当前维度'], bottom: 0 },
            radar: {
                indicator: [
                    { name: '总收入', max: 100000 },
                    { name: '月均收入', max: 80000 },
                    { name: '增长率', max: 50 },
                    { name: '活跃度', max: 100 },
                    { name: '客单价', max: 20000 }
                ],
                shape: 'polygon',
                center: ['50%', '48%'],
                radius: '60%',
                axisName: { color: '#2c3e50', fontSize: 11 }
            },
            series: [{
                type: 'radar',
                data: [{
                    value: [72000, 48000, 18, 82, 12500],
                    name: '当前维度',
                    areaStyle: { color: 'rgba(74, 144, 217, 0.3)' },
                    lineStyle: { color: '#4a90d9', width: 2 },
                    itemStyle: { color: '#4a90d9' }
                }]
            }]
        });

        // ============================================================
        // 响应式处理
        // ============================================================
        const charts = [trendChart, cityChart, paymentChart, expenseChart, incomeChart, radarChart];
        window.addEventListener('resize', () => {
            charts.forEach(chart => chart.resize());
        });
    </script>
</body>
</html>

运行说明

  1. 将上述 HTML 代码保存为 index.html 文件
  2. 使用浏览器（Chrome / Edge / Firefox 等）直接打开该文件
  3. 所有图表将自动渲染，无需启动任何本地服务器
  4. 调整浏览器窗口大小时，图表将自动自适应

技术点总结

  • 纯前端实现，无需后端服务，零依赖部署
  • ECharts 处理所有图表渲染与交互逻辑
  • 数据与配置完全解耦，替换 data 数组即可适配新数据集
  • 响应式布局适配桌面与移动端
  • 所有图表共享同一 ECharts 实例，减少资源开销
  • 展示了折线图、柱状图、饼图、雷达图四种常用图表类型

参考文档

官方文档

参考链接

总结

本文系统梳理了基于 Claude + XLSX Skill + ECharts 的 Excel 数据自动分析与可视化工作流。核心环节包括数据理解、图表生成、HTML 仪表盘构建以及 Word 报告自动生成。

这一方案将原本需要 2-3 天的人工分析流程压缩至分钟级，显著提升了数据处理与汇报的效率。文中涉及的 Prompt 设计策略、ECharts 配置模板以及完整的 Demo 示例均具备直接落地能力，可作为一人团队或多角色协作场景下的标准化技术方案参考。

相关推荐
玫瑰互动GEO1 小时前
腾讯AnswerBit（GEO优化监测平台）技术拆解：UI自动化如何采集真实AI回答
大数据·人工智能·ui·ai·自动化·geo优化
KIZIFLOW北泽五金2 小时前
液压系统压力损失怎么降？成因分析与减损实操方案
运维·自动化·新媒体运营·产品运营·流量运营·用户运营·内容运营
微三云 - 廖会灵 (私域系统开发)2 小时前
抖店 OPC（Operational Process Control）自动化运营系统：架构、痛点与服务商商业体系分析
运维·架构·自动化
weixin-a153003083163 小时前
7.Appium-ios端自动化
ios·appium·自动化
统计学小王子3 小时前
数学建模国赛倒计时5天——《软件工具（Excel）——国赛数据处理的第一道防线》
数学建模·excel
2601_962097364 小时前
Python工作流实战：SpiffWorkflow深度应用与BPMN自动化指南
python·自动化·工作流·bpmn·spiffworkflow
wang_yb4 小时前
Beta 分布：如何用“成功”和“失败”来预测下次尝试
数据分析·databook
2601_962100734 小时前
2026年旧素材怎么二次利用：图文批量转视频的自动化工作流工程复盘
运维·自动化·音视频
Am-Chestnuts4 小时前
用 DS随心转 把 AI 对话里的多组数据批量导出成 Excel
人工智能·excel
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接04ZCode 周末送额度活动开启：3 亿 Token 免费领取05历年考研数学一、数学二、数学三真题试卷及答案PDF062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10VSCode+CodeX扩展，无法启动