6.2 自适应布局

在进入的项目页面中点击“建图册”,进入图册定义页面,先从左侧拖入一个图表,如下图所示:

./img/story/3

可以拖拽左侧“资源”下的组件以及“图表”下的内容到页面中心位置的编辑区。 可以任意摆放布局,有阴影作为摆放区域的提示,区域的分割以已布局图表的上下左右位置五五开,也可以放到中间位置以替换当前图表。 资源摆放好后可以拖动区域边框调整资源所在区域的大小。

./img/story/2

6.2.1 添加图表

页面左侧“图表”抽屉中列出了当前项目中所有的图表。

将图表拖入布局会直接将图表插入到图册的指定位置,图表会标识为已使用,在当前图册页不能再插入该图表,但可以在另一页再次使用。

./img/178

6.2.2 添加其他资源

下面分别介绍“资源”分类下的每种资源的含义,和拖入到布局中的效果。其中“自由块”、“边框”和“标签页”比较特殊,在单独的章节中介绍。

  • 拖入标题或富文本后松开鼠标,会弹出富文本窗口,输入文字内容,并可以设置文字样式。标题只能放在整个图册页的上、下、左、右的位置,富文本可以放在任意位置。

./img/179

  • 拖入图片后,在出现的窗口中可以上传本地图片,也可以输入图片的URL获取图片。

./img/180

  • 拖入网页会出现输入网址的对话框,插入到图册后会直接显示该网址的网页内容。这里可以指定一个绝对或者相对地址,相对地址的根路径在dataviz-web/common/config.js文件中指定,对应属性名为customPageRootUrl。

./img/181

  • 拖入空白,会直接将一个空白区域插入到图册中,用来占位置,方便调整图册布局,增强美观性。

./img/182

  • 拖入按钮,会直接在布局中拖入一个按钮,可以在右侧属性区设置按钮的显示内容和功能,按钮功能目前有两种:刷新图册数据、重置过滤条件。

./img/183

  • 拖入视频资源后,会弹出视频设置对话框。可以输入视频的网络地址,并设置一些属性。

./img/story/6

注意这个功能目前是使用html 5的

  • 拖入时钟后,会直接在布局中拖入一个时钟。用于实时显示当前系统日期时间,可以在右侧属性区对时钟格式、字体样式等进行设置。

./img/story/7

  • 拖入动效时,会弹出动效选择窗口。动效也就是动画效果,为图册添加一些活动的元素,模拟简单的交互效果,使图册看起来更加生动活泼。动效类似于矢量图,不会因为缩放而造成失真。

./img/story/1.gif

results matching ""

    No results matching ""

    results matching ""

      No results matching ""