【项目idea】时政/其他的分享内容的词云图（结合飞书多维表格生成可点击的网页） #86

shandianchengzi · 2025-11-01T09:55:30Z

shandianchengzi
Nov 1, 2025
Maintainer

Motivation

作为一名支书，或者作为一个喜欢给别人分享杂七杂八资讯的自媒体接触得很多的人，每次分享的时候都觉得频繁转发会让人没有点进去的欲望，而且每个人的兴趣都是不同的，甚至散乱的，词云图刚好可以解决所有问题，美观、信息压缩度大、关键信息突出、详略得当，特别适合周期性整理分享的内容进行传播。

苦于目前并没有一个好用并实用的词云图生成器，我想了一个新的解决方案。

因此我期望做一个类似下图形式的、但是每个词都可以点开对应的报道的词云图网页生成器，权重由飞书多维表格自行计算或者人工调整：

（图源https://blog.csdn.net/tt18473481961/article/details/108045893）

因为我也没有时间做，所以直接把这个idea放在这里。

初步Demo

这里找大模型生成了简单的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>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>
    <style>
        #wordCloud {
            width: 100%;
            height: 100vh;
        }
        body {
            margin: 0;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="wordCloud"></div>
    <script>
        // 模拟数据（与你提供的结构一致）
        const echartsData = [
            { name: "十五五规划纲要", value: 90, link: "https://www.baidu.com/s?wd=十五五规划纲要", text: "国务院发布《十五五规划纲要》提出经济高质量发展目标" },
            { name: "光复纪念日", value: 60, link: "https://github.com/search?q=光复纪念日", text: "台北市举办光复纪念日庆祝活动" },
            { name: "某部门新规", value: 30, link: "https://cn.bing.com/search?q=某部门新规", text: "某部门发布新规规范行业标准" }
        ];

        function initChart() {
            const myChart = echarts.init(document.getElementById('wordCloud'));
            const option = {
                title: {
                    text: '',
                    x: "center"
                },
                backgroundColor: "#fff",
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        return `${params.name}<br/>${params.data.text || '暂无详情'}`;
                    }
                },
                series: [{
                    type: "wordCloud",
                    gridSize: 30,
                    sizeRange: [14, 60],
                    rotationRange: [0, 0],
                    textStyle: {
                        normal: {
                            fontFamily: 'Microsoft YaHei',
                            color: function() {
                                return "rgb(" +
                                    Math.round(Math.random() * 255) + "," +
                                    Math.round(Math.random() * 255) + "," +
                                    Math.round(Math.random() * 255) + ")";
                            }
                        }
                    },
                    left: "center",
                    top: "center",
                    right: null,
                    bottom: null,
                    width: "200%",
                    height: "200%",
                    data: echartsData
                }]
            };
            myChart.setOption(option);

            // 点击跳转（新增功能）
            myChart.on('click', function(params) {
                if (params.data && params.data.link) {
                    window.open(params.data.link, '_blank');
                }
            });

            // 控制台输出（保留原功能）
            myChart.on('click', function(params) {
                console.log('myChart----click---:', params, '------', params.data);
            });
        }

        // 响应式调整
        window.addEventListener('resize', function() {
            if (myChart) myChart.resize();
        });

        initChart();
    </script>
</body>
</html>

完整的项目思路

以下是分阶段技术方案，结合飞书多维表格的核心优势，用清晰的表格形式呈现每个步骤的目标和实现方式：

阶段	步骤	目标	实现方式	工具/技术
1. 数据录入	1.1 移动端采集	实现APP转发时自动捕获「文字+链接」	开发安卓/iOS快捷指令，将分享内容自动写入飞书表格	飞书开放平台 + 移动端快捷指令
	1.2 数据标准化	结构化存储每条记录的文本、链接、日期	飞书表格设置字段： • 原文 • 外链 • 关键词（多选） • 权重（1-10） • 创建时间	飞书多维表格
2. 数据处理	2.1 关键词提取	自动分析文本生成关键词	飞书DeepSeek调用提示词： "从以下文本提取1-3个核心关键词，用顿号分隔："	飞书AI字段
	2.2 权重标注	按重要性手动调整关键词大小	在「权重」字段直接输入数值（1-10）	飞书表格
3. 词云生成	3.1 代码模板	生成可交互词云HTML	预置模板（替换`data`变量为飞书表格数据）： `javascript<br>const data = {{飞书表格数据}}`	参考飞书网页部署教程
	3.2 自动化部署	每月生成静态词云页	飞书「网页自动部署」字段自动生成链接，历史版本通过「修订记录」管理	飞书多维表格
4. 展示与分享	4.1 交互功能	悬停看原文，点击跳转外链	HTML模板内置： • `mouseover`显示Tooltip • `onclick`跳转链接	JavaScript
	4.2 多端访问	允许他人查看词云	分享飞表格的「公开链接」或导出HTML独立部署	飞书权限管理
5. 维护扩展	5.1 数据更新	每月增量更新词云	飞书筛选本月新增记录 → 生成新词云	飞书视图筛选
	5.2 模板优化	调整词云样式	直接编辑飞书单元格中的HTML/CSS代码	飞书代码字段

关键设计说明

为什么选择飞书？

免服务器：数据存储和网页托管均通过飞书完成
无缝协作：可直接邀请他人共同维护数据
国内友好：无需科学上网，访问速度快
竞品比较：对比了 Airtable，由于学习曲线长、需要科学上网而放弃。

与传统方案的对比优势

传统方案痛点	飞书解决方案
需手动部署GitHub Pages	飞书自动生成网页链接
无法手机端录入数据	飞书APP直接转发内容到表格
词云更新流程复杂	修改表格数据即自动更新词云

与其他词云图或者手账软件对比优势

对比维度	本方案（飞书多维表格+自动化词云）	传统词云工具（微词云/WordArt）	手账类软件（Notion/FlowUs）	技术方案（GitHub Pages+Python）
数据录入便捷性	✅ 手机端直接转发，自动捕获文字+链接	❌ 需手动输入/粘贴文本	⚠️ 需手动整理内容	❌ 依赖爬虫或API
关键词权重控制	✅ 手动微调+AI辅助生成	⚠️ 仅支持词频或手动设置	❌ 无原生词云功能	✅ 可编程控制
交互性	✅ 悬停看原文+点击跳转外链	⚠️ 付费版才支持跳转链接	❌ 仅静态展示	✅ 完全自定义
协作与分享	✅ 飞书协作，实时更新词云	❌ 单人生成后分享	⚠️ 需付费解锁高级分享	❌ 需技术部署
自动化更新	✅ 每月自动生成新词云	❌ 完全手动操作	⚠️ 需配置自动化规则	✅ 但维护成本高
多端同步	✅ 手机/电脑实时同步	❌ 网页端为主	✅ 支持多端	❌ 依赖Git操作
数据安全	✅ 飞书企业级存储	⚠️ 第三方平台存数据	⚠️ 依赖服务商	✅ 自托管可控
移植便捷性	✅ 一键复制图片/iframe嵌入（支持PPT、公众号、飞书文档）	⚠️ 导出图片后需手动插入	❌ 仅限平台内使用	⚠️ 需截图或导出静态HTML
成本	✅ 免费（飞书基础版）	⚠️ 高级功能需付费	⚠️ 订阅制付费	❌ 需服务器费用
成品的可移植性	✅便捷，最终代码应支持移植到所有有文字+链接的数据表中	❌ 需要自己重新定义复杂的数据结构	⚠️ 词云图生成的功能弱

交付物示例

数据管理后台：飞书表格（模板示例）
词云页面：https://feishu.cn/page/xxxx（自动生成）

Navigation Menu

华中科技大学开放原子开源俱乐部

【项目idea】时政/其他的分享内容的词云图（结合飞书多维表格生成可点击的网页） #86

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

华中科技大学开放原子开源俱乐部

【项目idea】时政/其他的分享内容的词云图（结合飞书多维表格生成可点击的网页） #86

Uh oh!

Uh oh!

shandianchengzi Nov 1, 2025 Maintainer

Motivation

初步Demo

完整的项目思路

关键设计说明

Replies: 0 comments

shandianchengzi
Nov 1, 2025
Maintainer