Data Visualization Engine

---

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