当前位置:首页 > 资源 > 教程

教你从“0”开始美化数据大屏

主讲:东东

 

为什么别人用 DataViz 做的大屏很漂亮,我做的却就很丑呢? 他们做成那样

数据大屏,数据可视化,数据分析,设计,数据分析软件

我却做成这样

数据大屏,数据可视化,数据分析,设计,数据分析软件

好消息是,DataViz 有很多实用的技巧可以让屌丝瞬间变成高富帅。支持面向不同


用户团队的解决方案。

如果你拥有一个设计师

DataViz 的配置能力很强,设计师设计效果,基本上都可以完全还原,但为了保证工作量可控,以及效果能够 100%还原,需要有如下注意事项

    1、不能创造新图表

DataViz 中有超过 100 种图表,设计师要在这些图表中组合选择,如果设计师创造一个新图表或者新效果出来,可能导致扩展图表的工作量大大增加。

    2、设计自由度

  • a、配色,包括图表配色以及位置内容配色
  • b、字体
  • c、布局
  • d、边框
  • e、图册背景图
  • f、图表背景图
  • g、标题
  • h、图标
  • i、动图

 

    3、设计师最重要的输出

  • a、整体效果(包含配色、布局)
配置主题时可直接获取颜色值,在下图位置输入即可配置精准的颜色;

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

  • b、可直接使用的零件

背景图、图标、边框图、动图、可作为标题的文字图形。

工程师做的图册可能是这样的

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

设计师“装修”后的图册是这样的

数据大屏,数据可视化,数据分析,设计,数据分析软件

可问题是,我们往往没有设计师。

基于模板构建

由于面向大量的项目支持,DataViz 积累了大量的图册模板,DataViz 支持基于模板直接构建图册。新建图册即可弹出模板选择页面,默认是空的模板,

数据大屏,数据可视化,数据分析,设计,数据分析软件

直接基于选中的图册模板,更换图表、文字等,图册就可以快速变得高大上起来。看下图,拖拽“图表”到任意布局区域进行替换即可完成图册的制作。

数据大屏,数据可视化,数据分析,设计,数据分析软件

目前产品内置的模板样式有这些。

数据大屏,数据可视化,数据分析,设计,数据分析软件

如果这里没有适合我的业务主题,或者 Boss 中意的风格怎么办?自己动手!


自由发挥,人人都是设计师

我们希望人人都是分析师,设计师,DataViz给你足够的发挥空间。
下面通过一个制作过程引申出 DataViz 的使用技巧,教你玩转 DataViz。

我们拥有一个简陋的图册

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

布局的调整

根据用户和场景,划分主次信息。

这里我们的用户是卫计委,他们关注的是管辖区域的宏观指标,各个区域的人口指标是核心, 地图及数值kpi需重点表现。 看一下调整后的布局。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

使用自适应布局功能,在各个编辑区域之间拖拽图表拖拽区域边界位置实现上图布局, 突出地图KPI 的核心地位。

自由块的运用

调整布局过程中还使用了自由块布局,自由块是一种悬浮在自适应布局之上的一种布局组件,

自由块能够打破自适应布局在单一平面调整的局限,支持多层级叠加以及图层排序。

4.2中使用KPI结合富文本,嵌入自由块悬浮在地图区域,看一下使用过程。

创建自由块

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

先拖拽一个自由块到编辑区域。

数据大屏,数据可视化,数据分析,设计,数据分析软件

添加资源

自由块支持除标题以外任意类型资源的添加,当然也不包括自由块边框。在 4.2 中我们添加了富文本资源。将富文本组件拖拽到自由块中。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

然后编辑富文本,这里用到了 ${[KPI 图表名称]}$ 表达式引入了 KPI

数据大屏,数据可视化,数据分析,设计,数据分析软件

另外使用图片组件结合自由块,为每个 KPI 或标题前添加图标作为标识。使用精心搭配的图标,可以提升图册的精致感

数据大屏,数据可视化,数据分析,设计,数据分析软件

上图对各图表的边距属性做了微调,一般经验是图表不要靠近边缘,稀松优于密集。对于这种位置的调整也可以考虑结合自由块实现,更加自由。

自由块复制

这里用到了多个相同大小的自由块,怎么快速得到大小一致的自由块呢?

选中第一个自由块,CTRL+C 复制,CTRL+V 粘贴即可得到一摸一样的复制品。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

自由块对齐、微调

如何对齐呢?按住 CTRL 键,依次单击三个自由块进行圈选。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

选中顶部工具栏的对齐方式,这里选右对齐,就可得到上图右的效果。

数据大屏,数据可视化,数据分析,设计,数据分析软件

间距还有些差距,选中后可以使用键盘方向键微调。 过程中如果有任何操作失误,可以使用 CTRL+Z 撤销
边框的运用

边框是一种与自由块类似的资源,用于修饰图册内的元素。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

系统内置了 15 种边框样式。

数据大屏,数据可视化,数据分析,设计,数据分析软件

这里我们选择 15 号黑色半透明边框,类似磨砂效果衬在 KPI 富文本背后。

这里属性勾选交互穿透,否则会阻挡图表的交互事件,当然富文本并没有什么交互。并且因为自由块边框是有上下叠加关系的,需要在图层栏设置边框置于底层。

数据大屏,数据可视化,数据分析,设计,数据分析软件

效果是这样的。

数据大屏,数据可视化,数据分析,设计,数据分析软件

属性的调整

在图册里可以直接调整图表属性,这里的属性是图表自身属性的复制品,独立于图表。图册中选中某一个图表,右侧展开内容设置可即时调整图表样式。

数据大屏,数据可视化,数据分析,设计,数据分析软件

对于 Echarts 类型的图表,产品有选择的暴露部分属性,如何希望添加原生属性可使用详细属性设置功能进行编辑。

数据大屏,数据可视化,数据分析,设计,数据分析软件

需要注意的是,属性的语法结构参考Echarts3,并且这里不支持回调函数。在这一步骤,使用属性中页面背景图片选项,给图表加上半透明背景图。

数据大屏,数据可视化,数据分析,设计,数据分析软件

当然你也可以打开图册设置中的显示边框线,在主题中实现类似的效果。具体的,配色方案

自定义主题中调整内容背景色,当然也可以尝试调整其他样式。

数据大屏,数据可视化,数据分析,设计,数据分析软件

为图册修改主题

根据不同的业务主题选择合适的页面配色,这个工作在图册设置配色方案中完成。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

数据大屏,数据可视化,数据分析,设计,数据分析软件

数据大屏,数据可视化,数据分析,设计,数据分析软件

这里强调一下,主题配色分为 3 类,不同图表类型会绑定某一种配色类型。比如饼图使

分类色、热力图使用序列色。这里渐变色比较特殊,仅用于美化柱图的效果。配色调整效果见图

数据大屏,数据可视化,数据分析,设计,数据分析软件

主题配色师全局的,部分图表可能不希望跟随图册主题,在图表内容设置中勾选保持图表主题即可。富文本的配色可以跟随主题、也可以独立设置。

为图册添加背景

合适的背景图能够为图册效果带来质的变化,我们使用图册设置下的页面背景图片进行添加。

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

美化前后效果对比

优化前

 

数据大屏,数据可视化,数据分析,设计,数据分析软件

优化后

数据大屏,数据可视化,数据分析,设计,数据分析软件

大师就是这么诞生的,你是工程师,数据分析师,设计师,XXX 师。

大量产品特性等待你的挖掘

数据大屏,数据可视化,数据分析,设计,数据分析软件

数据大屏,数据可视化,数据分析,设计,数据分析软件

下面是期待您超越的作品

数据大屏,数据可视化,数据分析,设计,数据分析软件

数据大屏,数据可视化,数据分析,设计,数据分析软件

数据大屏,数据可视化,数据分析,设计,数据分析软件

数据大屏,数据可视化,数据分析,设计,数据分析软件

 

 

数据大屏,数据可视化,数据分析,设计,数据分析软件