页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。


目录

问题描述

方框槽型柱图、带槽型柱图、在组件模板资源中,有以下组件模板实现了“槽”(即数据对应的柱体重叠在另一个数值较大的柱体上)的效果的。Image Removed

资源
Image Removed
组件模板
Image Removed
效果图
刀型横条图、圆点横条图、
备注
Image Removed
柱图
Image Removed
方框槽型柱图
Image Removed

Image Added

方块型横条图

柱图
和方框槽型柱图很像,但是又不太一样
带槽型柱图
Image Removed

Image Added

Image Removed

横条图
带槽圆矩形对比柱图
刀型横条图
使用扩展属性

Image Added

{
"series": [
{
"showBackground": true
},
{
"showBackground": true
}
]
}

Image Removed

渐变圆角带槽对比柱图、

使用扩展属性

{
"series": [
{
"showBackground": true,
"backgroundStyle": {
"borderRadius": [
5,
5,
5,
5
]
}
},
{
"showBackground": true,
"backgroundStyle": {
"borderRadius": [
5,
5,
5,
5
]
}
}
]
}

Image Removed

柱图告警组合指标看板

{
"series": [
{
"barWidth": 10,
"showBackground": true
}
]
}

Image Removed

解决方法

1、首先,以上的文本组件实现告警的位置,需要在文本组建中数值对应的公式外侧加上大括号作为告警的标识。注意该大括号不要随意去除。

2、将组件模板复制过来,切换成自己的数据模型、配置好字段后。如果有需要修改告警的条件,如设置告警条件为 “大于等于20%,字体红色告警;小于20%,字体绿色告警”。可按如下步骤设置

(1)选中该告警的文本组件,右键→宏管理

(2)双击宏管理界面中该组件下方的告警宏代码

(3)找到如下截图中,红框框出来的部分

(5)修改代码 “value>=XX”中的数值。

注意事项

如果最大值超出了Y轴刻度,则需要设置Y轴的最大值大于最大值

横条图圆点横条图

Image Added


横条图方块型横条图

Image Added


对比柱图带槽圆矩形对比柱图

Image Added


对比柱图渐变圆角带槽对比柱图

Image Added


组合指标看板柱图告警组合指标看板

Image Added

该组件模板是是4个组合,效果图只选取了其中之一

通常来说,带“槽”的图形其背后的“槽”一般代表着一个对比的 “目标值”,通过数据柱体与槽的长度的对比,来体现度量的完成情况。然而在组件模板中,“槽“并没有使用字段,而是通过某些方式画出来的。那么在复用组件模板时,如何根据实际情况,来修改“槽”的值呢?

Image Added

解决方法


以上图形的“槽”的值,是与 数值轴(Y轴)的最大值保持一致。因此如果需要修改对比柱图的“槽”的值,可以通过如下方法处理。

已对比柱图为例:

1、在编辑界面中选中“对比柱图”组件。在“行区”中找到字段,在字段上右键→选择“值轴设置”

Image Added


2、在弹出的“值轴设置”窗口中,“刻度值”选择“自定义”,并且在“最大值”中输入“槽”的值,如20000。然后点击“确定”保存即可。

Image Added

3、上面只是设置了左轴的“销售量”字段,右轴还有一个“销售额”字段,也是按照上述的方式设置。