在给企业做可视化的时候,效果是企业非常在意的需求之一,那么如何满足各种的配置需求,JVS-BI做了很多细节的设计,这里主要讲解了对图表标题的设计思考,那么我们先来看下最简单的图标配置,下图是一个基础的组装图的设计,标题就是采用了普通的文字的方式进行展示,那么如果需要更多的效果,我们应该如何做呢?

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_可视化图表


设置标题的入口

1、点击图表页面的设计,进入图表配置引擎中,点击对应的组件,配置引擎右侧弹出图表组件的配置面板,如下图所示:

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_下划线_02

图表配置面板中,包括数据配置页面、组件页面、样式页面、交互页面,其中具体界面效果需要进入样式配置的界面

配置面板

2、点击样式设置配置项,系统展开标题的配置面板,如下图所示

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_自定义_03

①:标题的内容设置,可以输入对应的图标的标题

②:标题文本的样式设置,包括标题主文本的字体大小、颜色、加粗、斜体、下划线等设计

③:副标题的的设置,作为主标题的内容补充说明

④:设置副标题的文本样式,包括文本字体大小、颜色、加粗与下划线的设置

⑤:设置副标题与主标题相对位置,可以是横排紧跟主标题、可以是横排居右、也可以是标题下方展示,如下图所示

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_数据可视化_04

⑥:可以开启自定义标题的背景样式,系统提供了一些默认的样式配置,也可以提供自定义的一些标题背景,包括图表、颜色等

⑦:标题图表设置,点开标题的图标设置后,系统内置了大量的图标,包括实体的、和线状图标,可以设置图标的颜色,可以上传自定义的图标等

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_自定义_05

⑧:可以设置图标的大小

⑨:设置图标与标题间的间距

⑩:可以设置主题与图形之间的分割线,可以设置线条的样式、粗细、颜色(纯色、渐变等)

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_下划线_06

除了上述的配置外,可以设置标题的背景样式,包括背景的颜色(支持纯色与渐变)、背景的图案,包括系统内置的一些暗花图案等,也支持上传自定义的图案

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_可视化图表_07

标题是否好看,那么就是需要有效的组合各种功能的配置,包括图标、背景、主副标题、位置、背景颜色、暗花等设置。

告别平淡无奇的可视化图表,一秒抓住眼球,标题设计是关键!_下划线_08