共计 1819 个字符，预计需要花费 5 分钟才能阅读完成。
数据可视化大屏酷炫秘籍之前端开发者本人入手
数据可视化大屏的酷炫成果置信大家都曾经见识到了常常是这样的：
或者是这样的
又或者是这样的
如此酷炫的大屏成果，要想齐全还原首先离不开以下步骤：
- 设计师准确到像素的设计稿
- 有了图纸稿原型，那就须要动效了，没有动效的可视化大屏，等于没有灵魂，那么动效可能交给美工或设计师人员帮咱们制作一些 GIF 动画，或者小视频用于展现。
- 然而须要将数据与模仿场景绑定，比方模仿机房，模仿 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”技术和利用场景