找回密码
 立即注册

QQ登录

只需一步,快速开始

James.Lv 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2020-2-15 00:14  /   查看:3374  /  回复:0
本帖最后由 JamesLv 于 2020-2-15 00:43 编辑

在仪表板中除了使用系统已有的可视化组件之外,还可以通过内置扩展插件,甚至自定义插件绘制更多样化的图表以更丰富的形式展示数据。
版本更新记录
版本号
更新内容
支持Wyn Enterprise版本
下载地址
V1.0
第一次发布
3.0.04167.0
动画数字.zip (21.66 KB, 下载次数: 55)

1. 内容概述
大屏展示中,经常需要动态显示一组变化的数字。
本节即将为您介绍的动画数字插件不仅可以实现动态显示数字,并且在数字发生变化时支持翻转,滑动等时尚酷炫的切换效果,这将大大提高屏显的整体活力和吸引力。
另外,动画数字还支持与其他组件的数据交叉联动,非常适合创建数据大屏、管理驾驶舱等场景。
本贴为您介绍扩展组件动画数字的基本用法。
动画数字效果6.gif

动画数字效果-翻牌.gif

2. 操作步骤
(1)  下载插件包
下载动画数字插件包,将其保存到本地计算机并解压。

(2)  添加外部扩展插件
将解压后的文件夹放置到Wyn Enterprise安装目录Server\wwwroot\Web Contents\   路径下即可在产品中体验
例如: D:\Wyn Enterprise\Server\wwwroot\Web Contents\
image.png737061462.png

(3)  新建仪表板添加外部扩展组件
将外部扩展组件拖拽到仪表板编辑区。
image2019-12-11_18-41-35.png

(4)  选择插件
单击组件右上角进入编辑状态,选择“动画数字”,然后单击“确定”。
image2019-12-24_16-9-31.png

(5)  数据绑定
添加外部扩展组件后,“数据绑定”面板会自动打开,将数据集中的字段拖拽到绑定区即可完成数据绑定。
如果仪表板中未加载数据集,则需要先选择一个数据集进行加载,然后再绑定数据字段。详见加载数据集。
image2019-12-24_16-11-39.png
注意
数值绑定区中可绑定多个字段,但组件中仅显示绑定字段后的第一条数据。
可以通过为组件添加过滤器来控制数据的显示范围。

(6)  属性设置
在编辑区右侧选择“属性设置”进行图形样式设置。
image2019-12-24_16-14-12.png
自定义属性设置说明如下:
  1. {
  2.     "digit": {
  3.         "animationDuration": 1,
  4.         "animationMode": "slide",
  5.         "decimalLength": 0,
  6.         "integerLength": "auto",
  7.         "showThousandSign": true,
  8.         "backgroundColor": "",
  9.         "font": {
  10.             "color": "",
  11.             "size": "auto",
  12.             "family": "",
  13.             "bold": false,
  14.             "italic": false
  15.         }
  16.     }
  17. }
复制代码
1.“animationDuration”:动画时长,单位为“秒”。设置数字切换时动画的持续时间,仅“slide”模式支持此设置项。设置为“0”时,表示无动画效果。
2.“animationMode”:动画模式,支持'slide'(滑动), 'flip'(翻转)两种模式。当设置为“slide”模式时,可设置动画时长。
3.“decimalLength”:小数位数控制。
4.“integerLength”整数位数控制。 可设置为'auto'或者实际的位数。设置为“auto”时根据实际数字显示,数字前不会出现空白位数;
设置为整数位数时,当设置的位数大于实际数字位数时,则在数字前补0。
比如实际数字是3656952,将整数位数设置为“9”,那么最前面有两个0补充,显示为003656952。
5.“showThousandSign”是否显示千分符。
6.“backgroundColor:”设置背景颜色,如“blue”、“red”等。有关颜色名称,请参考https://www.runoob.com/cssref/css-colornames.html
7.“font”:设置字体样式,包括颜色、大小、是否加粗和是否斜体。

(7)  预览并保存仪表板
预览后如效果满意,即可保存仪表板。
image2019-12-24_16-42-12.png





0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部