63

制作有科技感的bi看板：设备运维情况看板

我设计的这个看板，灵感来自某大公司的商务数据。建议大家平时也可以关注一些大公司的数据看板或者数据报告。看到好的设计素材就保存起来，这样在你设计看板或制作图表时就能得到有益的启发。在平时我们多观察生活中的场景，如一些数据展示、一些广告设计的配色等，也可为自己的设计带来灵感（见图6-49和图6-50）。

图6-49

图6-50

下面先来分析我们要做的这张看板具体运用了哪些图表：包括折线图和面积图的组合、两个柱形图（不同的对比方式），以及条形图、圆环图、环形柱状图等。其实看似复杂的bi看板，也离不开数据源的有效支持。下面结合前面的看板制作逻辑，我们来看看如何从零开始制作这样一份商务图表吧。

原始表：数据库明细可参见第6章的示例文件“制作有科技感的bi看板：设备运维情况看板”中的数据源（见图6-51），原始单据模板如图6-52所示。

图6-51

图6-52

631制作页眉

1设置看板背景颜色

在看板编制页面的工作表中选中整个表格区域，利用lorpix工具取色，填充颜色设置为rgb色值：5，12，56（见图6-53），字体颜色设置为rgb色值：0，81，107，字体设置为加粗、微软雅黑，字号为10，且居中显示。

建议大家在制作看板时，中文采用微软雅黑字体，英文采用arial字体。

图6-53

除了整体填充excel颜色外，还可以采用背景图片的方式来设置看板背景效果。

单击【页面布局】→【背景】，插入示例文件中的深蓝色图片，之后单击【视图】选项卡，并取消勾选【网格线】（见图6-54和图6-55）。

图6-54

图6-55

2制作看板主标题

可以利用设计师网站搜索适宜的页眉元素，如下所示。

·千库网（见图6-56）。

·觅元素。

图6-56

在本例中，我采用了带有科技感的页眉元素（见图6-57），并将该页眉元素插入excel看板的工作表中。

图6-57

插入一个文本框，并编辑文字“表姐凌祯公司设备管理智能看板”，设置如下：文本框为无颜色、边框为无（见图6-58）。

图6-58

将字体更改为微软雅黑，字号为18号，颜色为白色，对齐方式为居中；调整页眉图片与页眉文本框的位置，使二者重叠，即完成看板页眉的制作（见图6-59）。

图6-59

3创建绘图数据源表

创建一页新的工作表，用于放置整体绘图数据。

在a1单元格中输入“机修费用总额”，在b1单元格中输入公式=su表1（维修费用）），即可计算出数据源表中所有的维修费用总额（见图6-60）。

图6-60

将总额拆分为一个个数字，可以方便我们在看板中显示一个个独立文本框的数值。

在b3：j3单元格区域中输入1到9的数字，在b4单元格中输入公式=d（$b$1，b3，1），复制填充公式并拖放到j4单元格。

当然，你还可以使用函数lu（a1）嵌套的方法，取数字1～9作为d函数的参数来源，这样可以减少辅助数据源的存在。

而某一业务的具体数值大小，可以根据每家公司的情况进行调整（见图6-61）。比如：在一家公司的人力资源看板中，其人工成本只是万元级，则只需“d”出1～5位数字即可。

图6-61

此处所建立的绘图数据源，是作为看板的【机修费用总额（元）】（见图6-62）中一个个独立数字显示图表数据源而构建的。

在表内构建系统当前日期辅助数据源，在e1单元格中输入公式=today（）（见图6-63）。

图6-62

图6-63

在bi看板的页眉区域中心位置绘制一个文本框，在编辑栏中输入“=”，再单击计算好的日期公式单元格，即sheet1！e1。此时，文本框自动显示系统当前的日期。修改文本框的格式：更改字体颜色为蓝色，设置字体为微软雅黑、字号为8号（见图6-64）。

图6-64

创建页眉图标

打开一个钟表形式的in（图标），其颜色为hex模式：43a9f9（见图6-65）。

图6-65

将该图标插入excel看板的sheet页面中，并调整到合适的位置（见图6-66）。

图6-66

4插入公司的logo

在看板的页眉位置处，可以选择自己公司的logo图片。在本例中，我们插入示例文件中的小火箭图片（见图6-67），并可使用excel自带的【删除背景】工具来实现“抠图”的效果。

图6-67

插入图片后，选中小火箭图片，单击【图片工具】→【格式】选项卡中的【删除背景】，默认的玫红色为删除的区域（见图6-68）。

图6-68

进一步单击【标记要删除的区域】按钮，单击涂抹在图片中待删除的位置，用以删除图片中的“云朵”区域（见图6-69）。

图6-69

修订完毕后，单击【保留更改】按钮完成抠图。然后调整小火箭图片的大小并拖放到标题中合适的位置区域，即可完成bi看板页眉的制作（见图6-70）。

图6-70

632制作数字标题

1制作标题的文本框

插入文本框，输入文字“机修费用总额（元）”，设置文本框为无颜色，边框为无，字体颜色为蓝色（见图6-71）。

图6-71

2插入机修的图标

打开一个修理形式的in（图标），其颜色为hex模式：43a9f9（见图6-72）。

图6-72

将该图标插入excel看板的sheet中，并调整好该图标的大小、位置（见图6-73）。

图6-73

3设置数字显示文本框

绘制一个独立的文本框，用于放置【机修费用总额（元）】中的第一位数字。插入文本框，并在编辑栏中输入“=”，再单击前面计算好的将总额拆分为一个个数字的b4单元格（也就是=sheet1！b4）。此时excel自动将单元格中的值关联到该文本框中，显示为数字4（见图6-74）。

图6-74

下面更改文本框的填充效果。

文字部分如下：设置字体为arial，字号为28号，白色加粗字体。

文本框填充如下：文本框为蓝色，透明度为80%，边框颜色为无色（见图6-75）。

快速复制文本框。选中刚刚设置好的文本框后，按住ctrl+shift组合键，配合鼠标向右拖曳复制出5个一样的文本框（见图6-76）。

图6-75

图6-76

在编辑栏中输入“=”，再单击前面计算好的将总额拆分为一个个数字的c4单元格，数字9就显示出来了。

在编辑栏中输入“=”，再单击前面计算好的将总额拆分为一个个数字的d4单元格，数字3就显示出来了。

在编辑栏中输入“=”，再单击前面计算好的将总额拆分为一个个数字的e4单元格，数字4就显示出来了。

在编辑栏中输入“=”，再单击前面计算好的将总额拆分为一个个数字的f4单元格，数字5就显示出来了。

在编辑栏中输入“=”，再单击前面计算好的将总额拆分为一个个数字的g4单元格，数字2就显示出来了。

数据源表中汇总的结果：机修费用总额“493452”，已经在一个个独立的文本框中有效显示了（见图6-77）。

图6-77

再次选中第一个已设置好格式的数字“4”文本框，双击【开始】选项卡中的【格式刷】按钮，实现格式刷的连续使用。然后，依次在9、3、4、5、2的文本框上单击，完成这些数字文本框的格式快速应用（见图6-78）。

图6-78

4文本框的对齐与组合

按住ctrl键，依次单击所有的数字显示文本框，然后，单击【格式】选项卡中的【对齐】→【顶端对齐】和【横向分布】（见图6-79）。

图6-79

设置完毕后，单击鼠标右键，选择【组合】，将所有的文本框组合在一起，即可完成数字显示区域的设置（见图6-80）。

图6-80

633制作3个比率圆环图

1制作数字文本标题

机修总小时数：

在绘图数据工作表的a6单元格中输入“机修总小时数”，在b6单元格中输入公式=round（su表1（修理时长）），0）（见图6-81）。

图6-81

在看板表格里，将前面设置好的“机修费用总额（元）”文本框复制一份，更改字号为8，字体颜色为白色（见图6-82）。

图6-82

在文本框里将“机修费用总额（元）”改成文字“机修总时长（小时）（见图6-83）。

图6-83

将设置好的“机修总时长（小时）”文本框复制一份，去掉里面的文字，在编辑栏中输入“=”，再单击前面计算好的机修总时长：b6单元格（公式=sheet1！b6），数字974就显示出来了。再设置其字体为arial，字号为18，字体颜色为蓝色，调整位置（见图6-84）。

图6-84

故障率：在之前机修费用总额的工作表的a8单元格中输入“故障率”，在b8单元格中输入公式=su表1（修理时长））（设备清单！g988125275）。

说明：此处的设备故障率=修理时长（所有设备数量x1天8小时x倒班系数125x全年标准工作日275天）（见图6-85）。

图6-85

在看板表格里，将前面设置好的“机修总时长（小时）”和“974”文本框复制一份，在复制的“机修总时长（小时）”文本框中更改文字为“故障率”。

在编辑栏中输入“=”，再单击前面计算好的故障率b8单元格，并且设置该单元格的格式为“百分比”形式，则数字0080%就显示出来了。然后设置字体为arial，字号为12，利用lorpix工具取色，更改字体颜色为rgb色值：221，72，61。之后调整文本框的位置（见图6-86）。

图6-86

2制作圆环图的绘图数据源

下面先计算保养缺位、修复完成率、维修配合率3个kpi数据。

·保养缺位：计算数据库里“故障原因”中属于“保养缺位”的占比，公式=sufs（表1（维修费用），表1（故障原因），sheet1！b10）b1。

·修复完成率：计算已经修复完成次数占总维修次数的比率。首先计算“维修结果”中属于“没有修好”的个数，公式=untifs（表1（修理结果），sheet1！c13），之后计算“没有修好”占“维修结果”的比例，公式=d13unta（表1（修理结果））。计算出没有修好的占比后，则修复完成率公式=1-e13。

·维修配合率：计算数据库里“配合态度“中属于“abc”的占比。首先计算出“配合态度”为“d”的个数，公式=untifs（表1（配合态度），sheet1！c16），占比公式=d16unta（表1（配合态度））；剩下的就是“abc”，也就是“维修配合率”的占比，公式=1-e16。

在制作圆环图前，先计算出这3个kpi数据的比例后，再分别用1减去这3组数据，得到制作圆环图的绘图数据源（见图6-87）。

图6-87

3制作圆环图

在看板工作表页面中，单击【插入】选项卡，选择【饼图】中的【圆环图】（见图6-88）。

图6-88

为圆环图添加数据。单击【图表工具】→【设计】选项卡，之后单击【选择数据】按钮，在弹出的【选择数据源】对话框中单击图例项（系列）的【编辑】按钮，在随后弹出的【编辑数据系列】对话框中设置【系列名称】为绘图数据源表格中的b10单元格，设置【系列值】为绘图数据源表格中的c10：d10单元格区域（见图6-89），之后单击【确定】按钮，即可生成圆环图。

图6-89

已经制作完成的【保养缺位】圆环图如图6-90所示。

再将做好的这个圆环图快速复制粘贴两份，按照上面修改数据源的步骤更改圆环图的修复完成率、维修配合率数据源，得到其他两个kpi数据的圆环图。3个kpi数据的原始圆环图如图6-91所示。

图6-90

图6-91

4美化圆环图

选中一个圆环图表，在【格式】选项卡中，快速设置【形状填充】为【无填充】，【形状轮廓】边框设置为【无边框】。依次完成3个图表的操作（见图6-92）。

图6-92

选中图表区域中的圆环，将环形的【形状轮廓】边框设置为【无边框】，利用lorpix工具取色，更改蓝色部分的颜色为rgb色值：67，169，249。依次完成3个图表的操作（见图6-93）。

图6-93

利用lorpix工具取色，更改橘色部分的颜色为rgb色值：67，169，249，透明度为84%。依次完成3个图表的操作（见图6-94）。

图6-94

设置3个圆环图的图表标题字体为微软雅黑，字号为8，字体颜色为白色。

选中3个图表并拖到合适位置，使用对齐技巧将它们进行对齐：选中3个图表后，单击【格式】选项卡，选择【顶端对齐】及【横向分布】以调整好布局位置（见图6-95）。

为图表增加数据标签。复制之前做好的一个文本框，在编辑栏中输入“=”，再单击绘图数据源中3个kpi占比所在单元格的位置，从而完成文本框与单元格的值相互联动的效果。引用完成后，进一步设置文本框的样式：字体为arial，字号为11，字体颜色为白色，调整文本框至合适位置（见图6-96）。

图6-95

图6-96

将3个圆环图与标签文本框选定后，单击鼠标右键，选择【组合】，将其组合在一起，即完成3个比率圆环图的制作（见图6-97）。

图6-97

634制作报修原因分析数据透视圆环图

1构建绘图数据源

单击数据库中的任意一个有字单元格，之后单击【插入】选项卡的【数据透视表】，在弹出的对话框中选择【现有工作表】，单击选择sheet1表中的a21单元格，之后单击【确定】按钮（见图6-98）。

在插入的透视表界面，将【数据透视表字段】里的【故障原因】字段拖到【行】，将【维修费用】拖到【值】，求出每一个故障的费用。圆环图的数据源就构建好了（见图6-99）。

图6-98

图6-99

2制作数据透视圆环图

单击选中数据透视表后，单击【插入】选项卡中的【数据透视图】，在打开的对话框中选择【饼图】→【圆环图】，创建一个数据透视圆环图（见图6-100）。

选中数据透视圆环图，将其剪切到看板工作表上，选中【维修费用】按钮，单击鼠标右键，选择【隐藏图表上的所有字段按钮】（见图6-101）。

图6-100

图6-101

之后增加图表标签。选中图表区域后，单击鼠标右键，选择【添加数据标签】与【设置数据标签格式】，在右侧【设置数据标签格式】窗格的【标签选项】中勾选【百分比】等（见图6-102）。此时图表中自动显示了比率：类别名称、百分比，并且显示了引导线。

图6-102

3美化数据透视圆环图

设置标签字体为微软雅黑，字号为8号，字体为白色。

选中整个圆环图表，将【形状填充】设置为【无填充】，将图表的【形状轮廓】边框设置为【无边框】，调整好图表的位置（见图6-103）。

图6-103

选中透视圆环图中的环形部分，将环形的【形状轮廓】边框设置为【无边框】，利用lorpix工具取色，依次选中4个部分的环形部位，更改4个故障原因的颜色并依次设置。

【保养缺位】部分的颜色为rgb色值：67，169，249。

【操作不当】部分的颜色为rgb色值：221，72，61。

【人为损坏】部门的颜色为rgb色值：106，146，190。

【自然损坏】部分的颜色为rgb色值：64，61，70（见图6-104）。

图6-104

给圆环图加上边框。选中图表，设置边框为实线，设置边框颜色为rgb色值：67，169，249，透明度为84%，宽度为025磅（见图6-105）。

图6-105

绘制小三角形。依次单击【插入】→【形状】→【等腰三角形】（见图6-106）。

更改三角形的颜色为rgb色值：67，169，249，【形状轮廓】边框设置为【无边框】，选中三角形的定点汇总黄色句柄，将其拖曳至边框位置处，使初始绘制的三角形变成直角三角形（见图6-107）。

图6-106

图6-107

将三角形的【宽度】和【高度】调整为025，按住键盘的ctrl键+鼠标滚轮，调整、放大工作表的显示比例。然后将三角形拖到图形的左上角位置，再按住ctrl+shift组合键复制一个三角形至图形的右下角位置，按住ctrl键依次选中两个三角形后，选择【绘图工具】→【格式】选项卡，单击【旋转】按钮右侧的小三角，选择【水平翻转】（见图6-108）。

说明：在制作bi看板的细节美化元素时，可利用ctrl键+滚轮的方式，快速调节excel的缩放级别，方便进行精细化的操作。

图6-108

再选中已调整好的两个三角形，按住ctrl+shift组合键的同时复制两个三角形至图形的左上角和右上角位置，单击【绘图工具】→【格式】选项卡，之后单击【旋转】按钮右侧的小三角，选择【垂直翻转】（见图6-109）。

图6-109

再依次将三角形的【宽度】和【高度】调整为015，调整位置。此时，拖动圆环图整个图表时，图表内部的所有元素都是一同联动的。至此，完成了数据透视圆环图的制作（见图6-110）。

635制作故障类别环形柱状图

图6-110

1构建绘图数据源

单击数据库中的任意一个有字单元格，之后单击【插入】选项卡中的【数据透视表】按钮，在打开的对话框中选择【现有工作表】，之后单击sheet1表的c30单元格，单击【确定】按钮（见图6-111）。

图6-111

将【数据透视表字段】里的字段【设备报修部位】拖到【行】，【维修费用】拖到【值】，求出每一个部位的费用，数值按升序进行排序，即构建生成了excel报表数据源（见图6-112）。

图6-112

在数据透视表的基础上，我们还需要构建环形柱状图的绘图数据源。

在前面的内容中我们了解到，环形柱状图以某个环形角度构建的环形区域作为数据系列的标识。一般来说，在环形柱状图中，最大数据系列的环形角度不超过270°，并由最外环往最内环逐级递减呈现数据。因此，我们将透视表统计的数据进行角度值的转化，将原始数据中的最大值转化为270°，其他数据系列按比率缩放（见图6-113）。