数据可视化大屏炫酷秘籍前端开发者自己动手数据可视化大屏炫酷效果相信大家也经常看到这样的：或者这样或者这么炫酷的大屏效果，要想完全还原，离不开以下几步：设计师的像素级设计稿有蓝图原型，然后需要动效，没有动效的视觉大屏是等于没有灵魂，所以动画效果可能会交给美术师或者设计师帮我们做一些GIF动图，或者小视频来展示。但是需要将数据与模拟场景进行绑定，比如模拟机房，模拟3D零件，不仅需要显示动态和图形效果，还需要绑定实际业务数据，所以这一步必须由我们自己在前端开发中完成。相信大家对Echarts的图表或地图开发者模式印象深刻。如果能直接利用这些动态效果，将其展示在可视化大屏幕上，升职加薪将不是梦，领导也会赞不绝口。下面我们以Wyn商务智能可视化大屏设计工具为例，演示如何开发插件，将喜欢的效果引入可视化大屏。下面介绍插件开发中的一些基本功能和demo示例。Demo下载地址：https://gcdn.grapecity.com.cn...1.visual.json文件介绍名称：插件名称externalJs：需要导入的外部js，可以通过获取配置中的参数{{parametername}}Configuration：获取扩展参数配置字段的内容2.webpack.config.js设置外部引用包中js对象的名称，可以参考外部扩展js插件visual.ts文件参考方法：3.package.jsonVersion：设置插件版本号4.Assets可以在里面定义一些图片资源，使用时返回base64文件。使用资源图片时，需要在visual.json中定义名称映射，获取图片内容：5.Capabilities.json属性设置，data字段配置1.dataBinding数据绑定(1)dataRolesname:属性名displayNameKey:显示名kind:grouping：用于测量字段的分类或分组。值：数值数据。groupingOrValue：可用作度量或分组。options：format格式化，displayUnit数据单元，enum自定义下拉框，（后面会详细介绍用法）（2）dataViewMappings，条件设置数据绑定的最大和最小数量。conditions组合条件，{}，{}属于or关系，下例可以理解为：①numeric没有绑定字段，类别绑定的个数不限。②numeric绑定data时，category最多只能绑定一个字段。2.options->visualcomponentpropertysetting（后面详细介绍使用方法）开启数据联动，开启数据联动后，才能实现组件间的数据联动，设置后显示的内容：3.actions设置组件按钮，详情请参考https://help.grapecity.com.cn。六、Visual.ts文件1、IVisualUpdateOption属性对象isViewer：表示预览仪表盘时是否渲染组件。isMobile::表示是否在移动端显示组件。isEditing：表示组件的编辑状态。当触发编辑操作时该值为真。isFocus：表示组件的焦点状态。触发焦点操作时该值为真。dataViews：在capabilities.json中定义的计算数据视图(dataViewMapping)。properties：capabilities.json中定义的属性模型(options.visual)。docTheme：选择的文档主题。语言：当前语言。scale：比例因子。过滤器：用于影响其他组件。2.获取属性设置内容3.组件排序，这段代码完成排序功能4.数据联动，点击实现dashboard数据交互（1）设置字段（2）获取联动项集合本功能调试代码查看5.联动钻、跳参考代码：bindEvents()方法6.数据格式化参考方法：formatData7。自定义设置参考number_formatting方法8.按钮显示和隐藏。我们的项目已经整体介绍到这里了。我们在下面为您准备了更多的进一步阅读。感兴趣的朋友不要错过。延伸阅读BI如何实现用户身份集成自定义安全程序开发BI如何配置“花生壳”，这篇文章够了【3D地图】开发攻略-详解“GeoJSON”技术及应用场景
