[{"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":"8ce3627e-9e58-471b-9133-4f135d191e7b","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","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)

图片

功能概述

用户通过图片组件可以在仪表板中显示图片,用于背景、边框等装饰,也可以为图片添加跳转项目。

除了显示固定的图片之外,还可以像其他组件一样绑定数据。这样一来,就可以实现根据上下文信息显示不同的图片。

xiaoguo.gif

添加图片组件

打开组件列表,选择图片组件并拖拽至编辑区。

image

显示固定图片

单击image2018-8-1_16-31-8.png按钮或单击属性设置面板的图片来源image2018-9-19_17-10-9.png,弹出图片管理对话框。

image

image2022-10-18_9-40-13.png

图片库中包含共享图片(指在文档门户网站中上传的图片,文档间共享)以及在当前仪表板中新添加的图片。

所有图片按照名称分类显示,比如名称中包含“背景”二字的图片,会显示在背景分类中。不能划分到现有分类中的图片则显示在“未分类”中。

选择一个需要的图片,然后点击右下角的确定按钮即可添加到仪表板中。

image

添加图片后,可对图片进行以下设置:

  • 重复填充:设置图片是否重复填充到表格中。单击下拉箭头,可选择不重复、重复、横向重复、纵向重复、重复,完整填充、重复,填满。

  • 填充尺寸:设置图片填充到表格中的尺寸。单击下拉箭头,选择原始大小、包含、覆盖、拉伸。

  • 水平位置:设置图片在表格中的水平位置。单击下拉箭头,可选择居中、左对齐、右对齐。

  • 垂直位置:设置图片在表格中的垂直位置。单击下拉箭头,可选择居中、顶部、底部。

image

添加新图片

除了使用共享图片之外,还可以为当前仪表板添加新的图片,添加后仅可以在当前仪表板中使用。

有两种添加方式:

  • 本地图片

  • 网络图片

添加本地图片

点击左上角的添加本地图片按钮可以上传新的图片,上传后会按照图片名称显示在下方分类中,新上传的图片仅可以在当前仪表板中使用。

image

添加网络图片

点击左上角的添加网络图片按钮可添加网络图片。

image

输入图片名称,图片链接或 Data URI 即可预览图片,点击确定添加。

image

新图片按照图片名称显示在对应分类中,新加的图片仅可以在当前仪表板中使用。

image

绑定图片数据

添加图片组件后,我们可以为图片组件绑定数据。如下图所示。

image

支持如下图片数据格式:

  • Base64 Data URL

  • http URL

  • 二进制字符串

图片数据为 URL,绑定后则会自动渲染成图片链接,进行显示。

图片数据为二进制的字符串,则需要在数据集或模型中提前将其数据类型设置为“图片二进制数据”,否则在仪表板中必须手动渲染成图片内容才可以显示出来。

image

image

注意

图片组件优先显示数据绑定中的图片数据。

当图片组件中既添加了固定图片,又绑定了图片数据时,组件会显示绑定的数据。

属性设置

选中图片组件,在编辑区右侧选择属性设置还可以设置图片组件的整体属性。

详细介绍,请您参考单个组件外观与属性设置