图表类型
2023-5-5 About 48 min
# 汇总数据图
# 交叉表
在原值基础上交叉表支持下面值类型计算, 详细请参考高级交叉表/数据透视章节
- 隐藏维度、隐藏指标
- 行/列占比(子分组)
- 总占比
- RANK/DENSE RANK
- ROW_NUMBER
- 累加/累加占比
- 高级统计
- 环比/滞后比较
- 同比
- 行/列汇总
- 行/列小计
- 表达式
# 支持自动滚动/轮播
交叉表支持开启自动滚动, 仅需设置滚动条 -> 取消页码显示 -> 打开自动滚动
- 支持首尾停顿时间设置
- 支持鼠标悬停暂停滚动
- 支持配置滚动速度
# 支持指标字体列字体加粗
# 交叉表布局
- 交叉表列宽配置
表头换行、在行维与指标上设定列宽
- 列汇总前置
- 行汇总前置
- 转置
- 对齐指标
- 单个指标不展示值表头
# 柱线图
每列显示为一条线，或者一个柱形图序列。
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | X 轴 | 放置一个或者多个维度节点 |
| 列维 | 分类 | 放置 0 个或者多个维度节点 |
| 指标 | 放置 1 个或者多个指标节点 | |
| 添加轴 | 显示双轴 | 建议为不同的轴配置成不同的图形类别，如：柱线 |
# 堆叠柱(线)
轴类型下拉选择堆叠柱，可以对拆分的指标(有列维)进行堆叠
提示
v1.10之前指标堆叠堆叠只能对相同的指标进行堆叠，多个不同的指标没有列维的场景不能进行堆叠
# v1.10.0堆叠支持按轴堆叠
# 堆积排序支持选择轴/积指标排序
按列维度堆叠不同指标 → 开启堆积排序 → 选择堆积指标
按轴堆叠 → 开启堆积排序 → 选择堆叠轴
# 双轴图
柱线图添加轴即可绘制为双轴图，建议为不同的轴配置成不同的图形类别，如：柱线
# 条形柱形图
默认值轴位垂直轴，通过设定值轴位水平轴可以绘制条形水平柱
# 山峰图
柱图通过设定柱体样式实现山峰图效果，山峰图值轴最小值强制固定位0，否则会出现山峰起点不在类别轴的问题
# 时间线配置
支持按列维拆分为时间线的不同节点，动态叙事
- 柱线图时间线配置, 用于时间线节点列维数, 默认所有列维，可以配置仅使用前N个列维分组
# 排行榜
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | x 轴 | 放置 1 个或者多个维度节点 |
| 列维 | 分类 | 不放置 |
| 指标 | 放置 1 个指标节点 |
| 配置项 | 说明 |
|---|---|
| 起始 | 设置展示的项目从第几名开始 |
| 记录数 | 展示记录数 |
| 开启滚动 | 当所有记录数大于展示记录数时可开启滚动显示 |
# 瀑布图
瀑布图常用与累计统计, 每一项的开始为前一项的结束，最后一项为汇总值
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | x 轴 | 放置 1 个或者多个维度节点 |
| 列维 | 分类 | 不放置 |
| 指标 | 放置 1 个或多个指标节点 |
# 子弹图(完成度)
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | x 轴 | 放置 1 个或者多个维度节点 |
| 列维 | 分类 | 0个或多个 |
| 指标 | 放置 2 个或指标，第二个指标为目标值 |
# 子弹图0-1规范进度条
用子弹图实现多进度条可视化，0-1规范对齐不同目标值的项目
# 玉珏图(环形柱图)
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | x 轴 | 放置 1 个或者多个维度节点 |
| 列维 | 分类 | 不放置 |
| 指标 | 放置 1 个指标节点 |
# 饼图
每列显示一个饼图
饼图按行绘制
默认饼图按列绘制，如果希望按行绘制可以在设置中修改
# 旭日图
# KPI指标卡
指标卡 输入没有维度信息时，一个指标值，如果需要进行同环比比较计算，需要增加行维，让一个值变成一个系列，然后引擎会按照默认偏移量进行比较计算，
默认情况下，环比比较偏移量为1，即与上一个数值进行比较， 同比比较偏移量为12，支持微调项目中修改
# 指标卡网络背景图片
# 漏斗图
一般情况下一个漏斗需要显示如 展示->点击->提交->付款, 一连串不同度量的数值， 在交叉表里面为值轴放置的多个列 行里面的值会按大小自动排序之后形成漏斗 所以漏斗图一行一个漏斗， 下面的 Demo 没有实际意义，仅仅作为演示说明
# 桑基图
以行值和列值为节点，单元格为行到列的连接进行画图，交叉表可以视为一个连接矩阵
为什么我的桑基图没有层级？
有很多人问为什么自己的桑基图没有层级，其实桑基图的层级和你的数据本身有关.
数据里面有 A -> B 和 B -> C， B为中间层，就会自动适配出两层 另外注意一点EChart对数据要求，不能成环 \(A->B..->A\)# 雷达图
支持按列绘制网或按行绘制网
# 气泡图
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | X 轴 | 放置一个或者多个维度节点 |
| 列维 | 分类 | 放置 0 个或者多个维度节点 |
| 值 | Y 轴、气泡大小、颜色深度 | 每个指标节点对应一个属性 |
- 气泡图横轴设定为指标v1.7.0 通过指标配置可以设定，横轴(x轴)支持显示指标
# 对比图
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | Y 轴 | 只能放置一个维度节点 |
| 指标 | X 轴左右两边 | 只能放置两个指标节点 |
# 标签云
只有能一个或多个行维节点
# 矩形树图
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | 多个行维代表多层，用颜色来区分类目 | 放置一个或者多个维度节点 |
| 列维 | 拆分系列 | 放置零个或者多个维度节点 |
| 指标 | 用面积来表示数值 | 放置 1 个或多个指标节点 |
# 热点图
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | x 轴 | 放置 1 个或者多个维度节点 |
| 列维 | 分类 | 放置 0 个或者多个维度节点 |
| 指标 | 放置 1 个指标节点 |
# 关系图
| 设计区 | 图表 | 要求 |
|---|---|---|
| 行维 | 中心点集 | 放置 1 个或者 2 个维度节点 |
| 列维 | 分类 | 放置 1 个或者 2 个维度节点 |
| 指标 | 放置 1 个指标节点 |
# 箱线图v1.10
箱线图需要2个或2个以上的行维，第一个行维作为横轴(分类轴)，后面的行维把第一个行维拆分之后的数据组和用于绘制一个箱体
| 配置项 | 说明 |
|---|---|
| 分组行维数 | 用于分组的行维数，默认使用一个行维 |
| 是否显示最小 | 是否显示最小 |
| 是否显示最大 | 是否显示最大 |
| 分位数-q1 | 默认为25%分位数 |
| 分位数-q2 | 默认为50%分位数 |
| 分位数-q3 | 默认为75%分位数 |
# 树形图v1.10
树形图按根据行维的层级结构绘制树，可以有0个或者多个指标，层级节点能汇总下级节点指标值, 目前仅支持sum汇总子节点
# K线图
- 标准K线图的绘制需要4个关键指标，分别是：开盘价、收盘价、最高价、最低价。如果数据中不足4个指标，系统将自动使用最后一个指标补齐，确保K线图所需数据的完整性。
- 我们建议优先使用直接计算的结果绘制K线图，以确保图表的准确与性能。
- 如果计算性能允许，也可以基于原始数据使用计算字段功能，通过按行维分组、时间排序的方式计算出开盘价和收盘价，从而生成K线图。这种方法可以更灵活地处理数据，适用于更复杂的分析场景。
# 区域地图
该地图需要的数据为带行政单位的省市县(区)维度, 如: 湖南省 -> 长沙市 -> 望城区, 打开下钻功能支持三级下钻
# 3D地图
3D地区使用配置与区域地图类似，不支持列维配置
# 3D地球
3D地球，地理位置数据为中文地名, 可以是国家，如：中国、美国；也可以是全球有主要城市：伦敦、纽约、北京等；
展示是形式有[区域标牌]、[气泡]、[标线地图]三种，[区域标牌]、[气泡]取行维的第一个字段作为地图位置数据;
[标线地图]取第一个行维为起始位置，第二个行维为结束位置
# SVG地图
- 在配置栏背景图选项上传SVG作为底图，需要标注的区域元素上需要有 name 属性;
- 如果您没有SVG素材不要着急，您可以使用synoptic.design工具，上传图片作为底图，在图片上做区域标记再转换为SVG；可以点击背景图中的链接跳转图片转SVG链接；
- synoptic.design标注时，仅需填入第二项AreaName(to display)
- 编辑完成点击
EXPORT TO POWER BI, 弹窗中右键保存svg到本地
除了按数值大小映射区域颜色深度之外，还支持按列维区分色块
# 明细表与支持数据的图形(企业版)
# 明细表
与透视表/交叉表不同之处在于, 交叉表有行表头与列表头两个表头, 如果把两个表头看做一个二维坐标系，则通过两个表头可以定位唯一一个值，在明细表中用同样的表头条件查询数据则可以查询出多个值，因此在交叉表中就要聚合操作，明细表则不需要聚合操作；
# 为什么要引入明细表？
- 对于 0.6 之前版本比较熟悉的用户可能注意到我们在常见问题里面讲产品定位时解释过为什么之前一直没有明细表功能，关于明细数据展示
- 同时讲到这里有用户可能会有疑问了，“交叉表如果把所有的维度都用上展示效果和明细表输出一样”；
- 结果一样，数据处理逻辑完全不同，性能差别也不同！ 聚合查询是根据用户拖拽的维度对数据集动态的生成聚合查询语句，经过数据源聚合计算返回聚合数据，如果仅仅把交叉表用于显示明细数据则是在原本不需要聚合的数据上，强行对所有维度做一次聚合操作，如果目标结果集很大，我们知道数据库进行聚合/去重需要大量的内存与 CPU 开销, 这种无意义的性能损耗会是相当严重的问题; 所以这就导致了很大部分不理解我们系统工作原理的用户会在此时抱怨性能问题;
如下图所示，明细表和交叉表在同时限定维度年与性别的情况下，明细表会返回大量没有经过聚合的重复数据，交叉表返回的则是对两个维度进行聚合之后的结果集。
 明细表 |  交叉表 |
# 明细表分页问题
明细表后台直接对数据集查询，默认返回前 2000 条数据，前端对 2000 条数据进行分页；结果集大小可在图表配置栏配置；
导出数据不做限制，后台查询好结果集之后返回全量数据；但是，还是请用户使用的过程当中注意控制下数据量大小，建议在百万级别之下；
用户可以通过维度过滤添加数据筛选条件查询自己关系的明细数据
# 明细表设置多级表头
# 明细表行合并
版本1.5.0之前明细表合并逻辑不考虑父格是否相同，只要当前格与同列上一格值一样则合并，这样会造成下面的合并错误
从版本1.5.0开始明细表合并逻辑需要左父格和当前格与上格一致则自动合并;
此外，考虑下面的业务场景，母订单可以拆分成2个子订单，但是运费只有一笔需要合并，效果如下:
如果按照上面父格相同要求对比父格，则由于子订单不一致合并失败，为了解决该问题，可以修改配置
- 上级列配置指定，只要用户设定
运费列的父格为主订单号则只做用户指定列比较 - 禁止合并:
站点列配置禁止合并则不会做合并处理
# 明细表单元格格式化
- 单元格格式化函数实例
/**
colDef: 列定义: {
"index":0, "dimType":"column", "typeIndex":0,
"prop":"_0", "name":"gender", "alias":"性别", "label":"性别",
"sort":"desc", "formatter":null,
"align":"left", "width":"100",
"headers":["合并"]
},
value: 当前单元格值
row: 该行所有列 {
"gender": { "alias": "性别", "value": "M" },
"the_year": { "alias": "年", "value": "2016" },
...
}
**/
formatter = function(colDef, value, row) {
debugger // 也可以尝试在这里加入断点观察参数结构
let {label} = colDef;
if (label == '开销') {
let color = value > 2 ? 'green' : 'red';
return `<div style="fheight:100%;">
<span style="margin-right: 5px;color:${color}">
<i class="fa fa-circle"></i></span> ${value}
</div>`
} else {
return value;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 明细表数据导出数据库
- 支持导出的数据库兼容 MySQL/Postgres/Clickhouse/sqlserver/Oracle/Doris
- 导入数据字段选择、字段类型、字段注释可配置
- 支持多次导入字段增加、字段减少数据合并
注意
如果导出目标数据库为Doris，因为Doris与MySql驱动和链接配置一样，但是建表语法和数据加载机制又有区别，所以需要在数据源中标记数据源为Doris，标记为Doris的数据源，后续数据导入到Doris会有相应优化处理
# 散点图
同样，散点图也是一种不需要数据聚合的图表，除了聚合之外，另外一点与气泡图不一样的地方在于，散点图的 x 轴和 y 轴都可以既是指标或者维度，
散点图做图基于明细数据，在选定 x 轴和 y 轴的情况下，默认用明细数据表的第一列和第二列作为 x 轴和 y 轴，轴值类型默认为 Category，
用 Category 作轴值类型，后台需要对轴所有值进行计算出重保存，有一定开销；如果值类型为数值，则只要计算最大与最小值；请根据实际情况配置轴值类型；
列维度若有配置则会联合作为散点分类；
维度、指标配置映射
- 列维度默认作为分类属性(颜色)
- 当仅有一个指标一个行维度, 行维作为x轴，指标为y轴
- 当有两个指标时，默认第一个指标为x轴，第二个指标维y轴
考虑到性能问题与误操作，散点图也默认配置了 2000 条返回记录的限制；
# 基于经纬度的做图的中国地图
考虑到精确的经纬度数据也很少会有重复，所有在 0.6 版本中基于经纬度的中国地图，也采用明细数据结果进行绘图；
- 散点图： 与普通散点图类似，列维度为分类，行维度需要配置
经度和维度 - 标线地图： 行维度依次放置
来源经度、来源维度、目标经度、目标维度，列维度放置分类
经纬度数据地图
# 经纬度地图
经纬度地图为明细数据地图，明细数据查询需要需要设置明细数据返回量，目前不支持大规模数据渲染
