页面树结构

版本比较

标识

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


目录

问题描述

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

资源
刀型横条图、圆点横条图、
组件模板
Image Removed
效果图
方块型横条图
备注
和方框槽型柱图很像,但是又不太一样
柱图
Image Removed
方框槽型柱图
带槽圆矩形对比柱图

Image Added

使用扩展属性

柱图

{
"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轴的最大值大于最大值
带槽型柱图

Image Added


横条图刀型横条图

Image Added


横条图圆点横条图

Image Added


横条图方块型横条图

Image Added


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

Image Added


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

Image Added


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

Image Added

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

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

Image Added

解决方法


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

已对比柱图为例:

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

Image Added


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

Image Added

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