[{"id":"bcb0874d-299b-448e-9552-9e9b25ef80dd","tags":[{"product":null,"links":null,"id":"ba7e818e-4f6b-4211-b1ac-58e3bafcf439","name":"\u66F4\u65B0","color":"orange","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"ae60ae59-34f5-4f32-a8eb-243ed1457543","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3d4848c3-910f-4ffa-9153-60bb507334a9","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"133f4ca6-d951-4d65-a618-3dc6301266f7","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2426c71d-8332-4cbd-a436-1ec4f8666464","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2ce7b6b0-78aa-4e4b-bf8a-e4ba2f988298","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"4706db46-0811-4652-8f59-1e0a1da84758","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"8f1271bb-2cd9-4f39-9897-c15b239ee7ab","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"677e13a7-6f3e-449f-986c-2c3a26f8d54f","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"5e40f6dc-caec-49d7-a1d0-be65f06815ba","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"2457f0e0-9e71-4860-a87d-065e0fb84f84","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5c67fd0-1145-482c-9113-97b492c44c18","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"a609a8fa-ab91-4c1d-a1c3-d209d0463303","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"b4a9eb15-94e5-48df-b218-a24138f0cf9c","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

组件基本操作

功能概述

仪表板的设计过程基本是通过组件操作来完成的,本节首先为您介绍组件相关的基本操作,使您对组件有一个初步的认识。

添加组件

在设计器内选择一个可视化组件并拖拽至编辑区,即可添加一个组件。

添加组件2

组件多选

支持两种方式多选:

  • 一是 Ctrl键+鼠标单击。

  • 二是 鼠标拖动框选。

选取多个组件后,在属性设置面板中可以设置其共同属性。

调整组件位置

选中组件(单选或多选),将选中的组件拖拽到目标位置并释放鼠标,调整可视化组件的位置。

对于多选,如果目标位置无法放置所选的所有可视化组件,释放鼠标将无法放置到目标位置。

image2019-12-10_14-12-40.png

支持通过键盘的方向键移动组件。移动时支持以单元格为单位或像素为单位进行移动。

当设计器中开启了“ 对齐到网格 ”功能,则按网格为单位进行移动;

关闭“ 对齐到网格 ”功能后,则以像素为单位进行移动。

image

多组件组合

我们在设计仪表板时,经常需要使用多个组件来完成同一个分析场景的展示。此时您可以将多个组件进行组合,从而形成一个整体更方便后续的操作。

具体操作方法为:

通过鼠标框选,或者键盘CTRL + 鼠标单击的方法选择多个组件,单击上方的组合>组合,或者在任意组件上鼠标右单击,选择“ 组合 ”(快捷键为 CTRL+G)即可将组件组合。

image

image


选中组合中的组件: 组合之后,单击组合中的任意组件即可选中该组合,再次单击组件即可选中组合中的组件。

image

组合之后,您可以对这个组合整体进行移动,缩放,与其他组件交互位置。

也可以作为一个整体,通过 URL 和 DIV 集成到其他应用程序中。

image

取消组合: 选中组合后,单击上方的组合>取消组合,或者右键单击,然后选择取消组合(或使用快捷键 SHIFT+CTRL+G )即可取消组合。

image

image

组件互换位置

选中两个组件(可通过按住 CTRL 键进行多选),右单击鼠标,然后选择大小>互换位置即可快速将两个组件的位置进行交换,同时也会互换大小。

image

或者选中组件后,单击上方菜单中的大小>互换位置

image

复制、剪切、粘贴及删除组件

选中组件(单选或多选),之后可以通过以下三种方法进行操作:

  • 鼠标右键单击,然后选择对应的操作。

  • 单击上方菜单栏中的图标按钮,进行剪切、复制、粘贴或删除。

  • 使用键盘快捷键操作:Ctrl+C→复制;Ctrl+X→剪切,Ctrl+V→粘贴,Delete键→删除。

image

另外,单选组件时,也可单击所选组件右上角的删除图标来删除组件。

image

聚焦组件

单击组件右上角的聚焦按钮即可进入组件的聚焦状态。

image

聚焦”顾名思义,即将焦点聚集到某一个组件上,单独对该组件进行设置和分析。聚焦后整个编辑区仅显示当前聚焦组件。

单击组件右上角恢复按钮即可退出聚焦状态。

image

组件重叠

在制作复杂仪表板时经常需要组件重叠来实现某些视觉效果。

单击设计器右下角的启用重叠图标可以开启或禁用组件重叠功能。

image

开启重叠后,组件就有了层次关系。选中一个组件在菜单栏可以更改层级关系。

image

或鼠标直接在组件上右单击,选择移动层级关系。

image

在组件重合的区域右单击,可以选择某一个组件。

image

或在组件树中选择。

image

组件对齐或分布

选择多个组件,然后在菜单或鼠标右键中选择对齐方式或分布方式。

image

image

快速调整组件大小

选中多个组件,右键单击选择大小,或者单击上方的大小,可快速设置组件大小,这在仪表板制作过程中非常实用。

image

image

等高:将所选组件以最后选择的组件为准设置成相同的宽度。

等高:将所选组件以最后选择的组件为准设置成相同的高度。

等大小:将所选组件以最后选择的组件为准设置成相同的宽度和高度。

延伸至左侧:将所选组件的左边框全部延伸至与最左边的边框对齐。

延伸至右侧:将所选组件的右边框全部延伸至与最右边的边框对齐。

延伸至顶部:将所选组件的上边框全部延伸至与最上边的边框对齐。

延伸至底部:将所选组件的下边框全部延伸至与最下边的边框对齐。

互换位置:选中两个组件时可互换位置,互换位置时也会互换大小。

例如:

image

格式刷

使用格式刷功能可以将一个组件的外观样式快速应用到另一个组件上,大大提高制作仪表板的效率。

选中一个组件,点击格式刷按钮,然后点击目标组件即可完成样式刷新。

格式刷

使用格式刷仅能将原组件外观相关的样式刷到目标组件,例如颜色设置、圆角弧度、标题样式等等。而像数据类、交互类、布局或动画等涉及到组件内容的属性一律不能刷。

type=info

提示

由于内部的实现机制不同,由内置组件向 ECahrts 插件刷样式时,部分样式不能同步刷新,请您在使用时留意手动调整。