大家好我行舟，因为冬月初七那天出生所以爸妈取名魏冬冬。 第一次接触帆软是2014年，当时有一个项目是用fr制作的页面，那个时候除了一点数据库其他什么都不会，然后就是托拖拽拽配上sql语句，在公司找点存在感。因为制作过程会遇见一些问题为方便交流问题就加了一个交流群，其实那个项目大概都忘了我做了什么，后来的项目没有用到fr就再也没有在意，没有关注过fr,但是当时加的那个群还在，没有删。时光荏苒，转眼4年过去了，突然有一天群里来条消息，一般都是忽略这类群消息的，但是机缘巧合我点链接看了下。这大概就是能够荣幸接触到这次开发大赛这么个过程了，是偶然，是不期而遇，就像久别重逢的老友，既然看到就不要错过，何况还有丰厚的奖金。 然后报名，加群，开始下载fr软件，搭建开发环境，浏览开发文档，重新认识这位老友。其实最开始我也没怎么太注重这个比赛，正如群里面的一个同学说的那样，拿个参与奖就是1000块，可以玩玩。看过比赛规则都知道，一个插件满分15分，6分算合格，提交一个合格作品就有参与奖，确实简单。我能告诉大伙我当时也是这么想的吗，嘎嘎。后来主办方传说哥说过一句话，改变这一想法。如果你只为了这1000块，那你的格局太小了。这句话确实残忍，尤其对于这个28岁我来说，好吧，那就拼了，先定一个小目标，前三。 电影肖声克的救赎里面有句话，Busy for living, or busy for death。而我则是要不忙着工作，要不忙着游戏，前几天老同学结婚还聊到大学的那些欢乐时光，流星蝴蝶剑，穿越火线，网游，还有war3里面的各种塔防，rpg,澄海3c，还有比较火的的dota，现在智能手机更厉害，各种手游让人眼花缭乱。这么看来我是it行业里面最不努力的那个，哈哈哈哈。不过上面这些在参加比赛那段日子里统统没有。 说实话，这个比赛看着容易，就是做下数据对接，按照现有的js库来封装所需要的数据展示即可，会点java js css即可，但真正做下去确实不简单，首先开发工具是idea,平时没用过，用起来各种不习惯，总是吧eclipse的快捷方式带到这里面，然后的事都是眼泪。好吧，那就上网查现学现用。然后问题又来了，他奶奶个熊，又把idea的快捷方式带到eclipse。不过后来群里有大神出个教程在eclipse开发这个。idea虽然不熟悉，但是按照开发文档一步步往下走，还是能做的，遇见一些常见问题群里都有答案，这点很好，在此感谢开发群里所有帮助过我的小伙伴们。报名大约一周，课题就出来了，轮播环形图。就是普通的环形图，我所知道的hightchart echart都能做，我们自己的项目是highchart，但是考虑到一些动画效果，就选择echart来做,正好学习下echart，后来我不得不佩服自己做了个多么明智的选择，后面再说。 然后开工，数据部分就参照demo2来改动，主要是环形图展示得重新设计。当时的思路是起一个定时器，轮询数据的状态，例如选中，远离，加边框。提交后10分，说是第三，偷偷乐一把，最起码1000块有了，后来说这样的轮播太突兀，应该显示这个变化的过程，看能不能改，这个太难为人了，就是数据加载时的那个动画效果，但是那个效果加载一遍后就没有了，根本弄不了，一想自己觉得简单的别人也会做，根本拉不开差距，课题擂主可是5000块。然后看echart社区，api，各种群各种问，有天下班在echart做各种测试，灵光一闪发现既然每次加载都会有动画，为什么不每次轮询再次加载下环形图呢，然后效果是有了，但是这是所有弧形缩放效果。实验是一件有趣的事情，最后让我找到最合适的方案，每次轮询到当前圆弧时，先将此圆弧对应数据移除初始化，之后再延时加载就可实现，至此沿圆弧和圆心的两种轮播动画就ok了。然后马不停蹄下一个课题。 蒋问有没有兴趣搞搞3d,我不会这个，连概念都不清楚。他说有个现成的3d库，可以学学，刚好有个课题是这个有点难度,试试吧很好玩的。那我就试试吧？然后发我课题，3d折线图，确实那个示例有惊艳到我，我也希望自己能做出这样的作品。现在拿出来大家可以看下这个示例，就问6不6，这个效果。然后从3d最基础的学起，场景 光源 相机 动画 。说实话折腾一个新的东西真是一番痛苦的过程，更何况对于我这个从来都不爱学习的人来说，整个人都要疯掉啦，经常搞到凌晨2、3点，有天下班回家同事问这么晚回还背电脑？当时酷酷的回答打游戏，要不要组队开个黑。记得后面是参照网上例子画了一个旋转的立方体，还跟同事炫耀，骄傲一把，现在想来当时真是好煞笔啊。 大半个月吧，就提交了作品，由于这个折线在拐角处会有一个豁口，于是在每个拐角处又加了一个圆点可以挡着，然后就花大部分精力做这个图例，控制点和线的隐藏显示，如此一来，我这个3d折线图又可以作为3d散点图来呈现，当时说要把这个打造成爆款，说给我出个视觉设计，听着就激动。不过后来这个课题出了一个13分的，本次大赛第一名开发的，他太厉害了，打不过他欸，做的跟示例一样，果然骄傲使人落后。开个玩笑主要是没有做出实例那种高大上效果，很多细节没有注意，很多需要属性面板设置的参数都没有，也没有自定义的背景音乐。大概这个时候大赛排行公布出来了，每个人的名次和每个作品的擂主都能看到，这个时候的第一名都已经30多分了，而我由于这个刚提交还未评分还是那个环形图的11分，差距很大得努力了。 等3d折线图视觉设计时，抽空做了个结合地图选择的小玩意。那天蒋问我，看你做的挺快闲也是闲着，看这个效果能不能做，做出来5000快就是你的，很简单，我看下确实不难，就是把现成的echart代码拿过来就能用，就接了这个课题。但是在fr里面，地图死活不能正常显示，因为从echart官网下载过的地图数据是utf-8编码，在fr只能设置utf-8编码集才能正常预览，蒋说这个我可以改这个编码集，但是拿给用户用他们可不愿意改。可当时真是黔驴技穷，没办法只好在群里公布自己源码，希望感兴趣的同学可以解决，说实话当时准备放弃这个课题的，没办法只能拿个合格分。但这个问题一直在那，总会想到他。后来有天加班一次偶然机会看到我们项目里面用到的的unicode编码，然后各种测试找到解决方案，用java按照他原来的编码集进行字符转换，然后js解码就解决了gbk加载utf-8地图的问题。 时间来到9月份，我们由于要赶一个app项目，各种加班，周末也被占满了。这个时候的象形柱图就有偷工减料的嫌疑了，后来看到看到我们的美女开发者的作品，都觉得我这个8分都高了。得亏提前学习了echart的api,即便后面我揽下了app项目里面的所有图表展示效果的开发我也能轻松搞定，让本该累成狗的9月不再那么匆忙。 十一假期期间又接了一个twaber可视化方案，因为前面研究过3d库，然后说数据都可以内置，相对就比较简单了。然后就是各种测试。墙，玻璃窗户，地板，电源走线，人物的运动轨迹，人物的3d模型，设备，设备贴图，还有设备上的文字，对象拾取，以及自动播放等等，8天假欸，怎么也能做得完。不过这个只是为了满足与评分标准来做，还有后面的又一个3d作品。整体上没有给人眼前一亮的感觉，就只是各种类型数据的堆积。 在提交玩这两个作品就11月份了，距离大赛结束还有20天，排行榜63分，第二。蒋说可以了吧。我回答自己再看看能不能找个效果来做做，然后就是图片轮播了，选了2个js脚本，一个带3d翻转的，一个是各种图片碎片后切换的效果。如是申请这个课题，然后融合这两个js，差异化的控制互补，尽量让同一个特效可以控制这两种轮播。大约一周就出来了，后来考虑这个没有数据集，应该作为一个控件来呈现。好嘛，插件变控件，一个字差别我的代码就天翻地覆啦。由于没有控件的示例可以参考，只能啃文档，好在当时群里面也有人做类似课题，可以相互交流，分享经验。当时下载了一个下拉选择控件的源码，但是不管是项目启动还是打包安装都不能用，得益于群里面好多热心人教我，更新完相关jar包，使这个控件能够打包安装使用，但是代码启动仍然不好使，不过有这就够了，只是不好调试而已。然后就是修改，打包，安装，启动，预览；修改，打包，安装，启动，预览。就这么重复着，目的只有一个，把我的轮播效果移植到这个控件里面。 急急忙忙在周五夜晚提交了作品，因为下周一大赛结束。但是由于不能自定义上传图片，没有设置效果参数面板（当时这些参数是做在初始化后事件里面的）不合格是必然。我说下周一我再提交一版，周末2天只做了一件事，解决了图片自定义上传的问题。果不其然，周一好多人又都提交了新作品，前四名也不例外。团战都打完了，你丫的还憋个末日大（大了个小兵，以为我看不到又把它给吃了）。 至此如火如荼的可视化插件开发大赛在为期4个月紧张刺激的角逐中落下帷幕，幸运保住了第二名，若不是最后这个作品，都落到第四了。其实好多人在最后这一个月都提交的2个甚至3个作品，感觉这次参赛的人都疯狂了。 最后是不是发表获奖感言了，感谢的人太多了，感谢fr提供这个平台，感谢fr员工还有许许多多在这个插件开发过程中直接或间接帮助过我的人，谢谢你们。饮水思源推己及人，最后为帮助更愿意了解这个插件开发的朋友，如有需要可以找我来拿这些个源码，获奖的不知道可不可以公开，如果能也可以公开。春节后再找个时间把剩下的做9.0适配上传我的git到时可自行下载源码。 后面是这个大赛成果展的传送门，感兴趣可以看看这次大赛成果：成果展 被贴各种标签的it民工更像一个舞者，把最枯燥单调的数据插上翅膀赋予思想和灵魂，用自己独特的方式来呈现，舞尽数据之美。