页面树结构

版本比较

标识

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


目录

问题描述

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

资源组件模板效果图备注
柱图方框槽型柱图


柱图带槽型柱图


横条图刀型横条图


横条图圆点横条图


横条图方块型横条图


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


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


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

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

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

解决方法

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

一、柱图和横条图

按照以下步骤操作

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


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


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

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

3.1、找到如下代码


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


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


刀型横条图、圆点横条图

方块型横条图

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

二、对比柱图

三、组合指标看板

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

Image Removed

Image Removed

Image Removed

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

Image Removed

Image Removed

Image Removed

方块型横条图

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

Image Removed

Image Removed3.1、找到如下代码

Image Added

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

Image Added

方块型横条图

3.1、找到如下代码

Image Added

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

Image Added

二、对比柱图

对比柱图的“槽”,是通过扩展属性实现的。其“槽”的值,并不是在宏代码中处理,而是与 数值轴的最大值保持一致。因此如果需要修改对比柱图的“槽”的值,可以通过如下方法处理。

1、在编辑界面中选中“对比柱图”组件。在“列区”中依次选中度量字段,右键→选择“值轴设置”

Image Added


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

Image Added

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


三、组合指标看板






带槽圆矩形对比柱图

使用扩展属性

{
"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轴的最大值大于最大值

以上所有组件模板不支持基于组件模板的数据要求之上,再新增度量字段的情况。比如XX柱图,列区只适合一个字段,若是2个字段,则宏代码无法适配,需要根据实际需要,通过定制服务方式处理。