About This Skill

--- name: data-visualization-engine description: 数据可视化设计与实现决策引擎。当用户提到创建图表、制作可视化、数据图表设计、可视化方案选择、图表类型选择、配色方案、大屏可视化、数据故事叙述、BI报表设计、ECharts/D3.js/Matplotlib/Plotly图表开发、Tableau报表、Python可视化、自然语言生成图表、可视化质量评估、常见图表错误等与数据可视化相关的需求时使用此技能。 --- # 数据可视化决策引擎 S级版 ## 概述 本技能为专业数据可视化设计决策系统，提供从图表选型到实现落地的全链路决策支持。基于数据类型、受众特征、技术约束三维评估模型，输出最优可视化解决方案。涵盖15+完整代码模板、30+决策表格、3+标准化SOP流程、10+常见错误模式分析。 --- ## 一、图表类型路由决策树 ### 1.1 七大类图表决策矩阵 | 目的类型 | 适用场景 | 推荐图表 | 禁用图表 | 数据要求 | |---------|---------|---------|---------|---------| | **比较类** | 展示类别间数值差异 | 柱状图、条形图、雷达图、词云 | 折线图（无序数据）、饼图（>5类） | 离散分类 | | **趋势类** | 展示数据随时间变化 | 折线图、面积图、蜡烛图 | 柱状图（时间序列>12点） | 时间序列 | | **分布类** | 展示数据分布特征 | 直方图、密度图、箱线图、散点图 | 饼图、柱状图（连续变量） | 连续数值 | | **关系类** | 展示变量间关联 | 散点图、气泡图、热力图、网络图 | 饼图、3D柱状图 | 多维数据 | | **构成类** | 展示部分与整体关系 | 堆叠柱状图、旭日图、环形图、树图 | 普通饼图（>5段）、3D饼图 | 分类+数值 | | **地理类** | 展示空间位置特征 | Choropleth地图、点密度图、流量图 | 气泡地图（区域过小） | 地理坐标 | | **层级类** | 展示多级结构关系 | 树图、桑基图、漏斗图、矩形树图 | 堆叠柱状图（层级>3） | 层级数据 | ### 1.2 图表选择决策树 ### 1.3 快速选择决策卡 | 需求 | 推荐图表 | 备选方案 | |-----|---------|---------| | A比B多多少？ | 柱状图/条形图 | 旋风图 | | X随时间怎么变？ | 折线图/面积图 | 蜡烛图 | | 数据呈什么分布？ | 直方图/箱线图 | 密度图 | | X和Y有什么关系？ | 散点图 | 气泡图 | | 各部分占整体多少？ | 饼图(≤5)/堆叠图 | 环形图 | | 数据在地图上如何分布？ | Choropleth地图 | 热力图 | | 多类别比较？ | 分组柱状图 | 雷达图 | | 流程/转化路径？ | 桑基图/漏斗图 | 流程图 | ### 1.4 图表选择自检清单 | 检查项 | 标准 | 问题表现 | |--------|------|---------| | 数据维度 | 不超过图表承载上限（柱状图≤15类，散点图≤3变量） | 数据点过多/过少 | | 数据误导 | 无截断坐标轴、3D扭曲、不等宽柱 | 视觉误导 | | 可读性 | 受众能在3秒内理解图表意图 | 信息过载 | | 匹配度 | 选择数据密度最匹配的图表类型 | 类型错配 | --- ## 二、工具选择决策树 ### 2.1 技术栈选型矩阵 | 维度 | ECharts | D3.js | Matplotlib | Plotly | Tableau | Python库组合 | |-----|---------|-------|------------|--------|---------|-------------| | **学习曲线** | ★★★☆☆ | ★★★★★ | ★★☆☆☆ | ★★☆☆☆ | ★☆☆☆☆ | ★★★☆☆ | | **交互能力** | ★★★★☆ | ★★★★★ | ★★☆☆☆ | ★★★★☆ | ★★★★★ | 依赖前端 | | **定制程度** | ★★★☆☆ | ★★★★★ | ★★★★☆ | ★★★☆☆ | ★★☆☆☆ | ★★★★☆ | | **性能** | ★★★★☆ | ★★★☆☆ | ★★★★☆ | ★★★☆☆ | ★★★☆☆ | ★★★★☆ | | **部署复杂度** | 低 | 中 | 中 | 中 | 高 | 中 | | **免费程度** | 完全免费 | 完全免费 | 完全免费 | 部分免费 | 付费 | 完全免费 | | **适用场景** | 大屏/仪表盘 | 高度定制可视化 | 统计分析 | 交互式图表 | BI分析 | 数据科学 | ### 2.2 工具选择决策流程 ### 2.3 典型场景工具推荐表 | 场景 | 推荐工具 | 备选方案 | 关键指标 | |-----|---------|---------|---------| | 仪表盘/大屏 | ECharts + Web框架 | Grafana | 渲染性能 | | 交互式报表 | Tableau / Power BI | ECharts + Django | 分析灵活性 | | 统计分析图表 | Matplotlib + Seaborn | Plotly | 统计功能 | | 地理可视化 | Mapbox / Leaflet | ECharts MAP | 地图精度 | | 学术论文图表 | Matplotlib (矢量输出) | Plotly | 出版质量 | | 实时流数据 | ECharts + WebSocket | D3.js + Socket.io | 低延迟 | | 移动端图表 | ECharts (移动优化版) | F2 (支付宝) | 响应式 | ### 2.4 Python可视化库对比 | 库 | 特点 | 适用场景 | 缺点 | 与Pandas集成 | |-----|------|---------|------|--------------| | **Matplotlib** | 底层灵活 | 任何图表 | 代码量大 | 低 | | **Seaborn** | 统计友好 | 统计分析 | 定制有限 | 高 | | **Plotly** | 交互原生 | 交互图表 | 包较大 | 中 | | **Altair** | 声明式 | 快速探索 | 复杂图表困难 | 高 | | **Bokeh** | Web交互 | 实时应用 | 语法复杂 | 中 | | **Pyecharts** | ECharts Python版 | 中国特色图表 | 中文文档 | 中 | --- ## 三、配色方案设计指南 ### 3.1 色盲友好调色板 | 色盲类型 | 占比 | 禁用组合 | 推荐替代 | |---------|------|---------|---------| | 红色盲(P) | 8% | 红-绿对比 | 蓝-橙配色 | | 绿色盲(D) | 6% | 红-绿对比 | 蓝-紫+图案 | | 蓝色盲(T) | 0.5% | 蓝-黄对比 | 粉-灰配色 | #### 安全配色方案 ### 3.2 品牌色适配指南 ### 3.3 场景化配色策略表 | 场景 | 推荐策略 | 色板示例 | 注意事项 | |-----|---------|---------|---------| | **暗色模式** | 高饱和度/高明度，≤6色 | 亮蓝#64B5F6, 亮橙#FFB74D | 添加微光晕 | | **打印友好** | 高对比度，避免浅色 | #000000, #1A1A1A, #4D4D4D | RGB转CMYK预览 | | **投屏/演示** | 高饱和度，远距离可辨 | 大红#E53935, 深蓝#1E88E5 | ≥3色区分 | | **医疗/科研** | 中性色基，低饱和 | #37474F, #607D8B, #90A4AE | 渐变≤5级 | | **财务报告** | 专业保守，低饱和蓝灰系 | #2C3E50, #34495E, #7F8C8D | 避免过度装饰 | | **数据新闻** | 故事导向，情感配色 | 根据数据故事选择 | 考虑受众情感 | ### 3.4 配色质量自检清单 | 检查项 | 标准 | 工具 | |--------|------|------| | 色盲模拟检测 | 使用Coblis/Stark验证 | 色盲模拟器 | | 打印预览检查 | 灰度可辨性 | 打印预览 | | 背景色对比度 | ≥4.5:1（AA标准） | 对比度检查器 | | 色板数量控制 | ≤7色 | 人工检查 | --- ## 四、数据故事框架 ### 4.1 五段式叙事结构 | 阶段 | 目的 | 内容要点 | 时长占比 | 图表数量 | |------|------|---------|---------|---------| | ① 钩子 | 吸引注意力 | 反常识数据/痛点问题/视觉冲击 | 10% | 1 | | ② 背景 | 建立情境 | 业务背景+数据范围+关键定义 | 15% | 1-2 | | ③ 发现 | 展示事实 | 核心数据+趋势变化+异常标记 | 35% | 3-4 | | ④ 洞察 | 解释原因 | 归因分析+对比解读+关联发现 | 25% | 2-3 | | ⑤ 行动 | 推动决策 | 具体建议+优先级排序+预期效果 | 15% | 1-2 | ### 4.2 故事化图表设计原则 #### Preattentive属性应用表 | 属性 | 编码效果 | 适用图表 | 注意事项 | |------|---------|---------|---------| | **颜色** | 区分类别 | 所有多系列图表 | ≤7类 | | **长度** | 编码数值大小 | 柱状图/条形图 | 从0开始 | | **位置** | 编码顺序/排名 | 散点图/折线图 | 语义位置 | | **角度** | 编码比例 | 饼图/雷达图 | 避免使用 | | **面积** | 编码数量 | 气泡图/treemap | 需配合颜色 | | **形状** | 编码类别 | 散点图 | ≤6类 | #### 视觉层次设计模板 ### 4.3 叙事节奏把控表 | 页面类型 | 数据密度 | 图表数量 | 文字量 | 交互深度 | 适用场景 | |---------|---------|---------|-------|---------|---------| | Executive Summary | 极低 | 1-2 | 50字 | 无 | 高管汇报 | | 业务洞察页 | 中等 | 3-4 | 200字 | 筛选 | 业务分析 | | 深度分析页 | 高 | 5-6 | 500字 | 下钻 | 专项分析 | | 技术报告 | 极高 | 7+ | 无限制 | 导出 | 技术评审 | --- ## 五、交互设计模式 ### 5.1 交互模式决策矩阵 | 交互类型 | 触发方式 | 适用场景 | 性能影响 | 复杂度 | |---------|---------|---------|---------|--------| | **筛选** | 点击/多选/日期范围 | 多维度分析 | 中（需缓存） | ★★☆☆☆ | | **下钻** | 点击/面包屑导航 | 层级数据 | 低 | ★★★☆☆ | | **联动** | 悬停/点击传播 | 关联分析 | 高（需优化） | ★★★★☆ | | **注释** | 双击/右键添加 | 协作标注 | 低 | ★★☆☆☆ | | **导出** | 按钮/右键菜单 | 报告生成 | 低 | ★☆☆☆☆ | ### 5.2 筛选器设计规范 ### 5.3 下钻路径设计规范 ### 5.4 联动设计模式 ### 5.5 导出功能规范表 | 导出格式 | 适用场景 | 文件大小 | 注意事项 | |---------|---------|---------|---------| | PNG | 静态报告/PPT | 中等 | SVG保持矢量，PNG≥2x分辨率 | | SVG | 印刷/无损缩放 | 大 | 需字体嵌入 | | CSV | 数据二次分析 | 小 | 包含完整维度信息 | | Excel | Excel二次处理 | 中 | 保留格式和公式 | | PDF | 正式报告 | 中 | 嵌入字体，设置CMYK | | JSON | 程序化使用 | 小 | 包含schema文档 | --- ## 六、大屏可视化方案 ### 6.1 布局系统 ### 6.2 动效设计规范 ### 6.3 实时数据架构 ### 6.4 性能优化清单表 | 优化项 | 策略 | 预期收益 | 实施难度 | |-------|-----|---------|---------| | 数据量控制 | 采样/聚合/懒加载 | -60%数据量 | ★★☆☆☆ | | 渲染优化 | Canvas/WebGL替代SVG | +10x渲染性能 | ★★★☆☆ | | 缓存策略 | 本地缓存+增量请求 | -70%网络请求 | ★★☆☆☆ | | 分页加载 | 虚拟滚动/无限滚动 | -80%内存占用 | ★★★☆☆ | | 动画优化 | CSS transform/will-change | 60fps稳定 | ★★☆☆☆ | ### 6.5 大屏质量门控 --- ## 七、ECharts完整代码模板 ### 7.1 基础折线图 ### 7.2 柱状图模板 ### 7.3 饼图模板 ### 7.4 散点图模板 ### 7.5 仪表盘模板 ### 7.6 地图可视化模板 --- ## 八、Python可视化代码模板 ### 8.1 Matplotlib基础图表 ### 8.2 Seaborn统计图表 --- ## 九、2026年技术趋势 ### 9.1 AI辅助图表生成 | 阶段 | 现状 | 2026预测 | 技术突破 | |------|------|----------|----------| | NL2VIS | 探索阶段 | 成熟可用 | LLM理解能力提升 | | ChartGPT | 概念产品 | 商业化 | 多模态大模型 | | AutoML Viz | 早期应用 | 全面采用 | 自动化ML解释 | | 智能配色 | 概念阶段 | 普及 | 设计知识图谱 | ### 9.2 自然语言数据查询 | 技术 | 现状 | 2026预期 | 挑战 | |------|------|----------|------| | NL2SQL | 商业化 | 90%准确率 | 歧义消解 | | 语音交互 | 早期 | 普及 | 方言支持 | | 多轮对话 | 有限 | 成熟 | 上下文理解 | | 跨数据库 | 困难 | 改善 | 数据集成 | ### 9.3 实时协作技术 | 层级 | 能力 | 代表产品 | 成熟度 | |------|------|---------|--------| | L1 | 评论标注 | Google Data Studio | ⭐⭐⭐⭐⭐ | | L2 | 多用户筛选 | Tableau | ⭐⭐⭐⭐ | | L3 | 协同光标 | Figma | ⭐⭐⭐ | | L4 | AI协作 | Notion AI | ⭐⭐ | ### 9.4 3D与沉浸式可视化 | 技术 | 现状 | 2026预期 | 适用场景 | |------|------|----------|---------| | WebGL 3D | 商业化 | 普及 | 大数据探索 | | WebXR | 早期 | 改善 | 展示汇报 | | 可触知可视化 | 研究 | 早期应用 | 数据新闻 | | AR叠加 | 商业化 | 普及 | 现场分析 | --- ## 十、质量门控三级清单 ### 10.1 P0级（发布阻塞） ### 10.2 P1级（质量门槛） ### 10.3 P2级（优秀标准） --- ## 十一、常见错误模式（10种） ### 11.1 图表选择错误 ### 11.2 设计呈现错误 ### 11.3 数据处理错误 ### 11.4 交互体验错误 --- ## 附录：快速决策卡 ### 决策卡1：首次选择图表 | 问 | 选项 | 推荐图表 | |----|------|---------| | 你想展示什么？ | A比B多多少？ | 柱状图/条形图 | | 你想展示什么？ | X随时间怎么变？ | 折线图/面积图 | | 你想展示什么？ | 数据呈什么分布？ | 直方图/箱线图 | | 你想展示什么？ | X和Y有什么关系？ | 散点图 | | 你想展示什么？ | 各部分占整体多少？ | 饼图(≤5)/堆叠图 | | 你想展示什么？ | 数据在地图上如何分布？ | 地图可视化 | ### 决策卡2：选择实现工具 | 问 | 选项 | 推荐工具 | |----|------|---------| | 你的技术栈是？ | Web开发 | ECharts/D3.js/Plotly.js | | 你的技术栈是？ | Python数据科学 | Matplotlib/Seaborn/Plotly | | 你的技术栈是？ | BI报表 | Tableau/Power BI | | 你的技术栈是？ | 低代码 | Grafana/Superset | ### 决策卡3：配色选择 | 问 | 选项 | 推荐方案 | |----|------|---------| | 使用场景是？ | 深色背景/大屏 | 亮色高饱和，添加发光效果 | | 使用场景是？ | 打印/灰度环境 | 高对比黑白，图案区分 | | 使用场景是？ | 色盲友好需求 | Okabe-Ito色板/蓝橙配色 | | 使用场景是？ | 品牌一致性 | 品牌主色渐变系 | --- *版本：S级 v2.0* *最后更新：2026年1月* *代码块：18+ | 表格：40+ | SOP：4+ | 错误模式：10*