组件
组件是独立的可视化元素,可以:
- 以各种格式显示数据(图表、指标等)
- 通过样式选项自定义外观
- 通过数据绑定连接到数据集
- 响应用户交互,如点击和悬停
所有组件在组件列表面板中呈现,在设计透视图下,组件通过拖放到画布来完成添加。
组件列表
组件列表面板中,可以在搜索框中通过名称对组件进行查找。所有组件划分为图表、输入、装饰和显示四种类型。以下根据不同类型依次进行说明。
图表
进行数据集的展示,大部分的图表都支持切片。
| 图表类型 | 适合展示的数据 | 典型场景举例 |
|---|---|---|
| 饼图 (Pie) | 部分与整体的比例关系,数据类别不宜过多 | 市场份额占比、预算分配比例、用户来源构成 |
| 折线图/面积图 (Line/Area) | 连续数据随时间或有序类别的变化趋势 | 股票价格走势、网站日访问量变化、气温变化 |
| 柱状图 (Bar) | 离散数据的大小比较,或部分与整体的关系 | 不同产品的销售额对比、各季度利润、人口年龄分布 |
| 散点图 (Scatter) | 两个连续变量之间的相关性或分布关系,或者三个维度的数据,通过位置和大小展现关系 | 身高与体重的关系、广告投入与销售额的关系;GDP与人均寿命及人口的关系、项目风险与收益及投入 |
| 特效散点图 (Effective Scatter) | 两个连续变量之间的相关性或分布关系,或者三个维度的数据,通过位置和大小展现关系,通过涟漪特效突出显示关键数据点 | 身高与体重的关系、广告投入与销售额的关系;GDP与人均寿命及人口的关系、项目风险与收益及投入 |
| 热力图 (Heatmap) | 二维平面上的数值密度或强度分布 | 城市交通拥堵时段区域图、用户点击热度图、基因表达矩阵 |
| 地图 (Map) | 地理区域上的数据分布或比较 | 各省GDP分布、疫情确诊人数地图、人口密度分布 |
| 雷达图 (Radar) | 多维度数据的综合对比,展示某个对象的多个指标 | 运动员能力评估、产品性能对比、用户画像分析 |
| 线图 (Lines) | 地理坐标系中起点和终点之间的流动关系,可附加数据量 | 春节各个城市之间的航班计数、物流运输路线、人口迁徙流向 |
| 关系图 (Graph) | 节点之间的网络关系或联系 | 社交网络好友关系、知识图谱、交通路线网络 |
| 桑基图 (Sankey) | 流量、能量或数据的流向和转移 | 用户访问路径分析、能源损耗流向、资金流动图 |
| 树图 (Tree) | 具有层级结构的数据,展示树形关系 | 组织架构图、文件目录结构、家谱 |
| 矩形树图 (Treemap) | 占比和层级数据,用面积大小和嵌套矩形展示 | 磁盘空间占用分析、商品品类销售额占比、股票市值分布 |
| 旭日图 (Sunburst) | 多层级的环形占比数据,展示层级和比例 | 公司各部门预算分解、地区人口构成、网站流量来源层级 |
| 箱线图/盒须图 (Boxplot) | 数据分布特征,包括中位数、四分位数、异常值 | 考试成绩分布、房价分布对比、实验数据差异分析 |
| K线图 (Candlestick) | 金融数据,尤其是证券、期货、外汇等资产的价格波动 | 股票行情展示、期货价格走势分析、汇率波动监控 |
| 仪表盘 (Gauge) | 关键指标的完成进度或当前状态 | 设备温度监控、KPI完成度、车辆速度表 |
| 漏斗图 (Funnel) | 流程中的转化率和流失情况 | 销售转化漏斗、用户注册流程、招聘流程各阶段人数 |
| 平行坐标系 (Parallel) | 高维数据的多维对比,展示各维度上的数据模式与聚类 | 汽车参数对比(价格、排量、油耗)、患者多项指标分析 |
| 主题河流图 (ThemeRiver) | 多主题随时间变化的演变趋势和累积效应 | 不同话题在社交媒体上的讨论热度变化、多个事件的时间影响 |
输入
在仪表板中作为输入控件,能够根据数据类型提供合适的交互方式,提升数据输入的准确性和用户体验。
| 组件 | 适合输入的数据类型 | 典型场景举例 |
|---|---|---|
| 复选框 (Checkbox) | 布尔值(是/否、真/假) | 标记状态字段,如“是否启用”、“已审核”等。 |
| 日期选择器 (DatePicker) | 单个日期(年、月、日或时间) | 填写出生日期、订单创建日期、任务截止日期、计划开始时间等。 |
| 数字输入框 (InputNumber) | 数值型数据,可限定范围和小数精度 | 编辑年龄、数量、价格、评分、库存量、百分比等精确数值。 |
| 单选按钮 (Radio) | 互斥的枚举选项(选项数量少) | 选择性别(男/女)、订单状态(待支付/已支付/已取消)、优先级(高/中/低)等。 |
| 日期范围选择器 (RangePicker) | 起始日期和结束日期组成的时间区间 | 设置活动有效期、项目起止日期、报表查询的时间段、会议安排等。 |
| 下拉选择 (Select) | 从预定义列表中选择一项或多项(可搜索) | 选择国家/城市、产品分类、所属部门、负责人、数据字典值(如“类型:A/B/C”)。 |
| 滑动块 (Slider) | 连续范围或离散刻度上的单个数值 | 调整音量百分比、评分(1~5星)、进度百分比、阈值设置等,适合快速调节。 |
装饰
装饰部分提供了12种不同类型的边框和4种不同类型的边线,这些边框和边线可以和其他的组件进行任意组合,从而获取不同的视觉效果。
显示
进行数据展示或作为辅助工具。
| 组件 | 适合的数据或功能 | 典型场景举例 |
|---|---|---|
| 数字翻牌器 | 需要动态刷新或动画展示的数值,强调数字的变化过程 | 大屏实时数据显示(如销售额、访问量)、倒计时、计数器、股票涨跌数值 |
| 全屏模式 | 控制页面或某个容器进入/退出全屏显示状态的功能 | 数据可视化大屏展示、报表全屏查看、视频/图表演示、文档阅读 |
| 带边框的标题1、2和3 | 用于区块或卡片的分组标题,视觉上通过边框与内容区分 | 仪表盘中的模块标题、图表标题、设置面板的分区标题 |
将组件添加到仪表板
- 切换到 设计透视图
- 在组件列表面板浏览或搜索组件
- 将组件拖到画布上
- 配置数据绑定和样式
组件设计最佳实践
1. 选择合适的图表类型
参阅组件列表说明里的内容选择合适的组件。
2. 遵循数据可视化原则
- 简化:移除不必要的元素
- 突出:强调重要信息
- 组织:逻辑分组和排序
- 标签:清晰简洁的标签
- 颜色:有意义且无障碍的颜色使用
3. 保持一致性
- 配色方案:在整个仪表板中保持一致
- 排版:统一的字体使用
- 间距:一致的外边距和内边距
- 交互模式:可预测的行为
常见组件问题与解决方案
问题:组件不显示数据
解决方案:
- 检查是否绑定了数据集
- 验证字段映射是否正确
- 检查过滤器是否排除了所有数据
- 使用样本数据测试以隔离问题
问题:性能缓慢
解决方案:
- 使用过滤器减少数据集大小
- 使用聚合代替原始数据
- 检查复杂的计算
后续步骤
现在您了解了组件,您可以:
组件是您的可视化工具包。从简单开始,尝试不同类型,随着对工具和技术的熟悉,逐渐构建更复杂的可视化。
祝您可视化愉快!📊