一、前言
大家好,我是枫城,起床晚了,昨晚喝的太嗨,加上些许拖延症,导致上午没起来,趁着下午空闲时间写下制作流程。先放个冰墩墩和他远房亲戚-接单单的图(祝大家新的一年,多接单,爱情,事业更上一层楼)。

二、数据准备
话不多说,直接开始制作流程。
- 先用python画一只冰墩墩。
主要利用的是python的turtle模块,Turtle本身是一款简单、易上手的绘图软件。该软件最初始在1967 由Wally Feurzeig, Seymour Papert and Cynthia Solomon用Logo编程语言开发而成,后来python出现后,由开发者对其进行了重写,便成为了python的一个内置模块。
以下是部分python制作冰墩墩的代码,为方便理解,添加了部分注释。

画完之后大概是这个效果

为方便理解放了小乌龟的中心图

X轴正方向为小海龟的前进方向,Y轴正方向为小海龟的左侧方向。
turtle.circle(radius, extent=None)函数 助记 正正左顺,负负右逆,正负左逆,负正右顺。

以下是现成python代码文件
冰墩墩python代码文件.txt (8.38 K)
以下这段是打印成图片的代码,默认可打印成eps格式的图片,如果要eps转换成jpg,需要安装ghostscript 软件来帮助转换。详见传送门 https://www.freesion.com/article/6649261703/

附加其他可用turtle画图的python代码,有兴趣的小伙伴可以自己画画看。
机器猫python代码.txt (4.66 K)
樱花python代码.txt (1.69 K)
小猪佩奇python代码.txt (5.34 K)
虎年拜年python代码.txt (8.81 K)
2.利用python获取图像像素点对应数据
主要利用python的PIL库的Image包,然后利用pandas和numpy做数据处理。
以下为代码,已做了对应注释,大概思路就是读取图片长,宽,然后依次获取对应点的像素。

色值转换函数,参考了网上可以移步传送门做更多了解http://www.javashuo.com/article/p-sqsliviy-ep.html
更多python图像操作库可以右边传送门 https://blog.csdn.net/u012426298/article/details/82111204
以下是对应图像处理代码及已处理好的XY坐标系像素集
图像处理代码.txt (1.54 K)
XY坐标系像素集.rar (1.41 M)
三、BI制作流程
1、数据集预览
主要用到的就是X,Y列还有hex列及首列序数列。

2、上传至帆软BI

将刚才的文件导入至对应业务包,同时将红框字段转化为文本,方便其作为维度字段。

3、创建仪表盘
3.1、新建仪表板,选择数据来源为XY坐标系像素集,选择散点图,将X字段拖入X轴,将Y字段拖入横轴。重命名为我是x轴和我是Y轴。其中Y轴设置为轴逆序,冰墩墩在仪表板的长宽比例可以通过坐标轴设定最大最小值进行调整。如下图所示:


3.2 将hex字段拖入颜色,将blankheader字段拖入细粒度,以此让XY最小颗粒度到每个像素点,以此达到XY以像素点为单位展示的目的。hex和blankheader都设置成以相同点为一组。


3.3 颜色调节
颜色这块暂时没想到快捷配色的方法,不知道从finedb有没有对应数据库配色表,通过改数据库表实现配色方案快捷匹配,手动改的太累了orz。(期待后续颜色这块支持直接传颜色值也行)
--我是后续--
通过和帆软工作人员的初步交流,找到了一个可以尝试的方法(通过浏览器开发者模式直接改对应模块的样式配置),颜色区传色值的需求也成功进入需求列表(^∀^) ,在需求还未迭代前,初步可尝试方案大致步骤如下:
3.31、按F12进入开发者模式(例子用的),并选择控制台(Console),再清空当前数据。

3.32、在空白处找到对应模块,以下是我的路径
BI.designModel.widgets["ee9231a9db9a0def"].settings.chartAttr.bd9302869913cece.color.dimension.colorMap={我们要修改的内容}
PS:快捷获取路径方法:可鼠标移动至colorMap 右键点击Copy property path, 复制其对应路径。
以下为常规路径图,右下为我们的要修改的目标代码,即目前未匹配的颜色模块。

此为我们的要修改的目标代码,即目前未匹配的颜色模块。

修改文件我已经处理好了,将其填入到上述括号即可 (用的是JSON字典的格式)
已处理颜色数据.zip (18.45 K)
3.33、BI.designModel.widgets["ee9231a9db9a0def"].settings.chartAttr.bd9302869913cece.color.dimension.colorMap={已填入内容}
将这段语句填入命令栏后敲回车ENTER,使其生效,再点击下方数据和BI颜色模块进行验证,会发现对应颜色已发生变化,自此达成批量修改效果。


3.4 冰墩墩单图大概效果如下所示(通过XY轴最值调整后的效果)

3.5 其余一些图片点缀。
纯冰墩墩有点单调,故网上找了些图片,通过图片,文字组件,配合对应的冬奥会素材,进行最终排版,点击冰墩墩文字还能播放对应歌曲。
冰墩墩点缀素材包下载:
冰墩墩素材.rar (3.06 M)
四、最终效果展示
捣鼓捣鼓大概是以下这个效果。就先这样,等想到新的内容我再进行补充,最后祝大家早日能够人手一墩,实现冰墩墩自由 。

|