页面历史

问题描述

在组件模板资源中，有以下组件模板实现了“槽型”效果的。

通常来说，带“槽型”的图形其背后的“槽”一般代表着 “目标值”的含义，“槽”的值，即代表目标值。通过度量柱子与槽的长度的对比，来体现度量的完成情况。在复用组件模板时，如何根据实际情况，来修改“槽”的值呢？

解决方法

需要根据不同的组件模板来处理。

一、柱图和横条图

按照以下步骤操作

（1）在替换完数据来源后的图形组件上，右键1、在替换完数据来源后的图形组件上，右键->宏管理

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

（3）找到如下截图中，红框框出来的部分

Image Added

2、双击宏管理界面中该组件下方的宏代码

Image Added

3、接下来我们需要找到关键代码，然后进行修改。由于柱图、横条图的“槽”效果使用的宏代码逻辑是不一样的，因此分开处理。

方框槽型柱图、带槽型柱图

3.1、找到如下代码

Image Added

3.2、将其中的“max”修改为需要设置的目标值，比如20000。之后保存宏代码即可。

Image Added

注：方框槽型柱图、带槽型柱图这两个组件模板的宏代码中，“槽”的值的原始逻辑是取度量字段数据中的最大值。

刀型横条图、圆点横条图

方块型横条图

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

二、对比柱图

三、组合指标看板

方框槽型柱图、带槽型柱图、

刀型横条图、圆点横条图、

方块型横条图

和方框槽型柱图很像，但是又不太一样

带槽圆矩形对比柱图

使用扩展属性

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

渐变圆角带槽对比柱图、

使用扩展属性

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

柱图告警组合指标看板

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

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

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

（1）选中该告警的文本组件，右键→宏管理

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

（3）找到如下截图中，红框框出来的部分

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

注意事项

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