数据可视化大屏酷炫秘籍之前端开发者自己动手
<h1 id="数据可视化大屏酷炫秘籍之前端开发者自己动手"><strong>数据可视化大屏酷炫秘籍之前端开发者自己动手</strong></h1><p>数据可视化大屏的酷炫效果相信大家都已经见识到了经常是这样的：</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028151440784-171157287.jpg" alt="" loading="lazy"></p>
<p>或者是这样的</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028151450816-1768682790.jpg" alt="" loading="lazy"></p>
<p>又或者是这样的</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028151458735-206826507.png" alt="" loading="lazy"></p>
<p>如此酷炫的大屏效果，要想完全复原首先离不开以下步骤：</p>
<ol>
<li>设计师精确到像素的设计稿</li>
<li>有了图纸稿原型，那就需要动效了，没有动效的可视化大屏，等于没有灵魂，那么动效可能交给美工或设计师人员帮我们制作一些GIF动画，或者小视频用于展示。</li>
<li>但是需要将数据与模拟场景绑定，比如模拟机房，模拟3D零件，不仅需要展示动效和图形效果，还需要绑定实际的业务数据，那么这一步就得我们前端开发自己动手了。</li>
</ol>
<p>相信大家都曾为Echarts的图表或地图开发者模式给打动过，如果能够把这些动效直接为我们所用，展示到可视化大屏中，升职加薪不是梦，领导夸赞不绝口。</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028151510707-1718770188.png" alt="" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028151518976-265555887.png" alt="" loading="lazy"></p>
<p>那我们接下来就以 Wyn 商业智能可视化大屏设计工具为示例，演示如何进行插件开发，将喜欢的效果引入到可视化大屏中，接下来为大家介绍插件开发中的一些基础功能，以及demo示例。</p>
<p>Demo下载地址：</p>
<p>https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjIyMjY3fDUxZGM3Y2M5fDE2NTk1OTMxNDB8MjkzODJ8MTUwOTg2</p>
<p>一、visual.json 文件介绍</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028151539285-603089419.png" alt="" loading="lazy"></p>
<p>name：插件名称</p>
<p>externalJs：需要引入的外部js，可以通过{{参数名}}获取配置中的参数</p>
<p>Configuration：扩展参数</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155000004-1029026546.png" alt="" loading="lazy"></p>
<p>配置字段内容获取</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155009831-310832695.png" alt="" loading="lazy"></p>
<p>二、webpack.config.js</p>
<p>设置外部引用包里面的js对象名称，可以在 visual.ts 文件中引用</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155018652-1273508763.png" alt="" loading="lazy"></p>
<p>外部扩展js插件引用方式：</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155034464-893927532.png" alt="" loading="lazy"></p>
<p>三、package.json</p>
<p>Version：设置插件版本号</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155047131-367654783.png" alt="" loading="lazy"></p>
<p>四、assets</p>
<p>可以在里面定义一些图片资源，使用时返回base64文件，用资源图片时，需要在visual.json 中定义名称映射</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155056273-1759091465.png" alt="" loading="lazy"></p>
<p>获取图片内容：</p>
<p><img src="Aspose.Words.d5a76693-a904-4ac4-9264-7a77ce9159df.013.png" alt="" loading="lazy"><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155103565-575718046.png" alt="" loading="lazy"></p>
<p>五、capabilities.json 属性设置，数据字段配置</p>
<p>1．<strong>dataBinding</strong> 数据绑定</p>
<p>（1）dataRoles</p>
<p>name: 属性名称</p>
<p>displayNameKey: 显示名称</p>
<p>kind:</p>
<p>grouping：用于度量字段的分类或分组。</p>
<p>value：数值数据。</p>
<p>groupingOrValue：可用作度量也可以用作分组。</p>
<p>options：format 格式化，displayUnit 数据单位，enum 自定义下拉框，（使用方式后面详细介绍）</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155116610-2006556456.png" alt="" loading="lazy"></p>
<p>（2）dataViewMappings，conditions</p>
<p>设置数据绑定的最大，最小数量。</p>
<p>conditions 组合条件，｛｝，｛｝属于或者关系，下面示例中可以理解为：</p>
<p>① numeric 没有绑定字段，category 绑定数量无限制。</p>
<p>② numeric 若绑定数据，则category 最多只能绑定一个字段。</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155128956-1838132889.png" alt="" loading="lazy"></p>
<p>2．options->visual 组件属性设置（使用方式后面详细介绍）</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155139006-675735570.png" alt="" loading="lazy"></p>
<p>开启数据联动，只有开启数据联动后，才可以实现组件之间数据联动</p>
<p>设置后显示内容：</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155148496-1726381483.png" alt="" loading="lazy"></p>
<p>3．actions 设置组件按钮，详细介绍请参考</p>
<p>https://help.grapecity.com.cn/display/wyn600/Actions</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155156639-566196985.png" alt="" loading="lazy"></p>
<p>六、visual.ts 文件</p>
<p>1．IVisualUpdateOption 属性对象</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155214147-1466444950.png" alt="" loading="lazy"></p>
<p>isViewer：表示在预览仪表板时是否呈现该组件。</p>
<p>isMobile:：表示是否在移动端显示该组件。</p>
<p>isEditing：表示组件的编辑状态。当触发了编辑操作时，值为true。</p>
<p>isFocus: 表示组件的聚焦状态。当触发了聚焦操作时，值为true。</p>
<p>dataViews: 在capabilities.json中定义的计算数据视图(dataViewMapping)。</p>
<p>properties: 在 capabilities.json 中定义的属性模型（options.visual）。</p>
<p>docTheme: 选择的文档主题。</p>
<p>language: 当前语言。</p>
<p>scale: 比例因子。</p>
<p>filters: 用来影响其他组件。</p>
<p>2．获取属性设置内容</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155227801-281791455.png" alt="" loading="lazy"></p>
<p>3．组件排序，此代码完成排序功能</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155240211-1306099729.png" alt="" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155250329-1930262889.png" alt="" loading="lazy"></p>
<p>4．数据联动，点击实现仪表板数据互动</p>
<p>（1）设置字段</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155301117-1438944675.png" alt="" loading="lazy"></p>
<p>（2）获取联动item合集</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155309602-847505772.png" alt="" loading="lazy"></p>
<p>此功能调试代码查看</p>
<p>5．联动钻取，跳转</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155320276-587806204.png" alt="" loading="lazy"></p>
<p>参考代码：bindEvents() 方法</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155329623-1691849551.png" alt="" loading="lazy"></p>
<p>6．数据格式化</p>
<p>参考方法：formatData</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155339185-44844602.png" alt="" loading="lazy"></p>
<p>7．自定义设置</p>
<p>具体参考 number_formatting 方法</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155348426-648098951.png" alt="" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155357930-2046967604.png" alt="" loading="lazy"></p>
<p>8．按钮显示隐藏</p>
<p><img src="https://img2022.cnblogs.com/blog/139239/202210/139239-20221028155406600-577407667.png" alt="" loading="lazy"></p>
<p>到这里我们的项目就整体介绍完毕，下面为大家准备了更多拓展阅读，感兴趣的小伙伴不要错过。</p>
<h2 id="拓展阅读"><strong>拓展阅读</strong></h2>
<p>BI如何实现用户身份集成自定义安全程序开发</p>
<p>BI如何配置“花生壳”，看这一篇就够了</p>
<p>【三维地图】开发攻略 —— 详解“GeoJSON”技术和应用场景</p>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<br>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网</p>
<!--p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解企业级低代码开发平台，请前往活字格
</p><p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件</p>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解嵌入式的商业智能和报表软件，请前往Wyn Enterprise
</p-->
<br><br><br>
来源：https://www.cnblogs.com/powertoolsteam/p/16836373.html
頁:
[1]