可视化看板中的利润计算

易知微创新技术团队

| 2024-08-30 14:55 71 0 0

一、预览效果

二、实现逻辑

添加【标题】和【输入框】组件，利用数据过滤器，通过交互中的实时回调实现输入收入和成本自动计算利润的效果。

三、操作步骤

3.1 基础设置

首先，在工作台-->【组件】-->【文字】及【交互】中分别添加4个【标题】和2个【输入框】组件，并调整位置和大小。

添加【标题】组件

添加【输入框】组件

添加好后效果如下：

注：本文中将各组件进行命名以作区分，命名情况如上图所示

3.2 样式设置

3.2.1 标题样式

选中【收入】，在【数据】中将文本内容修改为【收入】。对【成本】和【利润】做同样的操作。

修改完毕后，将【利润结果】中的文本清空。

3.2.2 输入框样式

选中【收入输入框】，在【样式】-->【全局】-->【占位符】中修改输入框中的文本，对允许输入的数值范围进行提示，并在【数字配置】-->【数值范围】中做对应的修改。对【成本输入框】做同样的操作。（注：本文中数值范围为0~10000）

设置输入框中允许输入的数值范围

3.3 交互设置

选中【收入输入框】，在【交互】-->【回调参数】中添加回调：【匹配动作】设置为【实时回调】，并填写字段值和变量名。本文中字段值为value，此处变量名为A。

对【成本输入框】做相同的操作。（注：为了便于后续操作，此处变量名可以为B。）

3.4 数据过滤器

在【利润结果】组件中添加一个数据过滤器。

过滤器中的代码如下图所示，写好代码后添加回调字段【A】和【B】，并保存。

3.5 结语

按照以上步骤操作完毕后，编辑界面效果如图所示。您可以在右上角【预览】中查看整体效果。

编辑界面最终效果

数据可视化看板 奥运会可视化看板 大型运动会可视化看板搭建 可视化看板中的利润计算 可视化看板

赞同 0

: 微信

: 链接

全部 0条评论

易知微创新技术团队

135

文章

1.07K

人气

粉丝

关注

关注我们

扫码获取

更多数字孪生可视化干货内容