关于葡萄城开发技术:数据可视化大屏酷炫秘籍之前端开发者自己动手

31次阅读

共计 1819 个字符,预计需要花费 5 分钟才能阅读完成。

数据可视化大屏酷炫秘籍之前端开发者本人入手

数据可视化大屏的酷炫成果置信大家都曾经见识到了常常是这样的:

或者是这样的

又或者是这样的

如此酷炫的大屏成果,要想齐全还原首先离不开以下步骤:

  1. 设计师准确到像素的设计稿
  2. 有了图纸稿原型,那就须要动效了,没有动效的可视化大屏,等于没有灵魂,那么动效可能交给美工或设计师人员帮咱们制作一些 GIF 动画,或者小视频用于展现。
  3. 然而须要将数据与模仿场景绑定,比方模仿机房,模仿 3D 整机,不仅须要展现动效和图形成果,还须要绑定理论的业务数据,那么这一步就得咱们前端开发本人入手了。

置信大家都曾为 Echarts 的图表或地图开发者模式给感动过,如果可能把这些动效间接为咱们所用,展现到可视化大屏中,升职加薪不是梦,领导夸拍案叫绝。

那咱们接下来就以 Wyn 商业智能可视化大屏设计工具为示例,演示如何进行插件开发,将喜爱的成果引入到可视化大屏中,接下来为大家介绍插件开发中的一些根底性能,以及 demo 示例。

Demo 下载地址:

https://gcdn.grapecity.com.cn…

一、visual.json 文件介绍

name:插件名称

externalJs:须要引入的内部 js,能够通过 {{参数名}} 获取配置中的参数

Configuration:扩大参数

配置字段内容获取

二、webpack.config.js

设置内部援用包外面的 js 对象名称,能够在 visual.ts 文件中援用

内部扩大 js 插件援用形式:

三、package.json

Version:设置插件版本号

四、assets

能够在外面定义一些图片资源,应用时返回 base64 文件,用资源图片时,须要在 visual.json 中定义名称映射

获取图片内容:

五、capabilities.json 属性设置,数据字段配置

1.dataBinding 数据绑定

(1)dataRoles

name: 属性名称

displayNameKey: 显示名称

kind:

grouping:用于度量字段的分类或分组。

value:数值数据。

groupingOrValue:可用作度量也能够用作分组。

options:format 格式化,displayUnit 数据单位,enum 自定义下拉框,(应用形式前面具体介绍)

(2)dataViewMappings,conditions

设置数据绑定的最大,最小数量。

conditions 组合条件,{},{}属于或者关系,上面示例中能够了解为:

① numeric 没有绑定字段,category 绑定数量无限度。

② numeric 若绑定数据,则 category 最多只能绑定一个字段。

2.options->visual 组件属性设置(应用形式前面具体介绍)

开启数据联动,只有开启数据联动后,才能够实现组件之间数据联动

设置后显示内容:

3.actions 设置组件按钮,具体介绍请参考

https://help.grapecity.com.cn…

六、visual.ts 文件

1.IVisualUpdateOption 属性对象

isViewer:示意在预览仪表板时是否出现该组件。

isMobile::示意是否在挪动端显示该组件。

isEditing:示意组件的编辑状态。当触发了编辑操作时,值为 true。

isFocus: 示意组件的聚焦状态。当触发了聚焦操作时,值为 true。

dataViews: 在 capabilities.json 中定义的计算数据视图(dataViewMapping)。

properties: 在 capabilities.json 中定义的属性模型(options.visual)。

docTheme: 抉择的文档主题。

language: 以后语言。

scale: 比例因子。

filters: 用来影响其余组件。

2.获取属性设置内容

3.组件排序,此代码实现排序功能

4.数据联动,点击实现仪表板数据互动

(1)设置字段

(2)获取联动 item 合集

此性能调试代码查看

5.联动钻取,跳转

参考代码:bindEvents() 办法

6.数据格式化

参考办法:formatData

7.自定义设置

具体参考 number\_formatting 办法

8.按钮显示暗藏

到这里咱们的我的项目就整体介绍结束,上面为大家筹备了更多拓展浏览,感兴趣的小伙伴不要错过。

拓展浏览

BI 如何实现用户身份集成自定义平安程序开发

BI 如何配置“花生壳”,看这一篇就够了

【三维地图】开发攻略 —— 详解“GeoJSON”技术和利用场景

正文完
 0