一个交互式数据可视化页面，基于 Chart.js 呈现 当前时间 AI 对就业市场的影响与新兴岗位趋势。

AI就业趋势可视化仪表盘网页Website

这是一个关于 AI 驱动下传统行业岗位消亡与新兴机会的交互式数据可视化页面。打开页面，你会先看到顶部实时跳动的趋势追踪时钟和滚动的新闻走马灯，紧接着是核心数据——3.5 亿个受冲击岗位、2.1 万亿美元 AI 市场规模、72% 企业 AI 采用率，这些数字会在你停留时持续变化。

向下滚动，页面依次呈现六个板块：职业冲击用真实案例展示六个正在消失的职业（电话客服、初级设计师、程序员、文案写手、翻译、数据录入），每条都标注了消亡率和数据来源；实时动态模块自动拉取全球 AI 行业新闻，每五分钟刷新一次，接口失败时降级到预置资讯；危险指数将二十余个行业分为高危/中危/安全三档，配有动态进度条和成本对比表，直观展示 AI 与人工的成本差距（最高可达 99.97%）；趋势可视化通过七张交互式图表从不同维度呈现数据——行业雷达、岗位变迁预测、投资分布、高增长赛道 CAGR、投入产出比气泡图以及各国替代进度对比；时间线回溯了从 2020 年 GPT-3 到 2030 年新平衡的八个关键节点；最后是机会板块，列出了 12 个当前仍可入场的方向，每个都附有启动成本、预期收益和标签，以及”最危险的 5 个方向”与”最值得入场的 5 个方向”的生存法则对比。

整个页面是深色主题的单页应用，带有粒子网络背景、玻璃拟态卡片、滚动渐入动画和实时数据跳动效果，所有内容打开即用，无需安装或部署。

技术实现：

• 使用 Chart.js 构建 7 种图表（雷达图、折线图、环形图、气泡图、柱状图等），从多个维度呈现数据关系
• 粒子背景基于 Canvas + requestAnimationFrame 实现，运动轨迹和连线逻辑由我自行编写
• 使用 IntersectionObserver 实现滚动触发动画，元素进入视口才激活，避免不必要的渲染开销
• 新闻模块通过 Fetch API 拉取 Google News RSS（经 rss2json 转换），我加了缓存策略与降级逻辑，接口异常时可平滑回退到预置数据
• 主题色通过 CSS 自定义属性统一管理，响应式布局基于多断点 Media Query 适配桌面与移动端
• 整体采用数据驱动视图的架构，数据与渲染逻辑解耦，后续我维护或扩展都比较方便