# 添加素材
素材组件的主要作用是通过添加素材的方式对数据报表页面进行美化。
#### 前提条件
- 已开通DataArts Insight服务。
- 已创建管理数据源的项目，参考[创建并管理DataArts Insight项目](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0002.html)完成项目创建。
 
#### 操作步骤
1. 登录[智能数据洞察控制台](https://auth.huaweicloud.com/authui/login.html?#/login)。
2. 单击管理控制台左上角的![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001784672214.png)，单击右上角的企业项目，选择企业项目。
3. 在控制台上方单击"项目"后，单击项目名称，进入项目页面。
4. 单击"数据分析 \> 大屏 \> 新建大屏"，进入新建数据大屏页面。
5. 选择对应的项目，单击"确定"进入创建数据大屏页面。
6. 在页面左侧的组件区域单击"素材"组件，切换至素材组件页。
   图1素材   
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001869787965.png) 
7. 拖动素材组件至画布区域。
8. 在页面右侧配置找素材的[样式]。
9. 完成素材的样式配置之后，单击大屏编辑页面右上侧的"保存并发布"或"保存"。
 
 #### 样式
- 尺寸位置
  - W：设置图表的宽，单位为px。
  
  - H：设置图表的高，单位为px。
  
  - X：设置图表在画布中的位置，单位为px。
  
  - Y：设置图表在画布中的位置，单位为px。
  
  - 不透明度：设置图表在画布上的透明度，可通过滑动条进行设置，也可手动输入百分比，比例越大透明程度越低。
  
  
  图2尺寸位置   
  ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001643889238.png) 
- 边框（样式）
  - 填充
    - 样式：边框支持丰富多种的样式设置。
    
    - 自定义边框：
      - 图片添加方式：图片可通过url或本地上传的形式添加。
      
      - 边框宽度：可以通过上方、右侧、下方、左侧来调整图片展示样式，取值范围0\~500之间。
      
      - 边框偏移：可以通过上方、右侧、下方、左侧来调整图片展示样式，取值范围0\~500之间。
       
     
   
- 装饰（样式）
  - 缩放模式：支持保持原图大小、按比例缩放、拉伸缩放。
  
  - 样式：支持丰富多种样式设置。
   
- 背景图
  - 效果
    - 背景色：设置自定义背景组件的背景颜色。
    
    - 羽化：设置自定义组件的羽化，输入值必须在0到100之间。
      图3无羽化效果   
      ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001692573757.png "点击放大")
      图4羽化效果   
      ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001763716030.png "点击放大") 
    
    - 模糊度：设置自定义组件的模糊度，输入值必须在0到100之间。
    
    - 亮度：设置自定义组件的亮度，输入值必须在0到200之间。
    
    - 色相旋转：设置自定义组件的色相旋转，输入值必须在0到360之间。
    
    - 不透明度：设置自定义组件的不透明度，输入值必须在0到100之间。
     
  
  - 边线选项
    - 样式：支持实线、虚线、点划线的设置。
    
    - 宽度：设置边线的宽度，输入值不能小于0。
    
    - 颜色：设置边线的颜色。
     
  
  - 圆角
    - 左上角：设置圆角的左上侧，输入值不能小于0。
    
    - 右上角：设置圆角的右上侧，输入值不能小于0。
    
    - 右下角：设置圆角的右下侧，输入值不能小于0。
    
    - 左下角：设置圆角的左下侧，输入值不能小于0。
      图5圆角都为0效果   
      ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001644182358.png "点击放大")
      图6圆角都为90效果   
      ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001810555445.png "点击放大") 
     
  
  - 填充
    - 使用素材：添加预置背景图，方便高频复用背景图。
    
    - 自定义背景：
      - 图片：支持url添加和本地上传图片。
      
      - 缩放模式：支持报错原图大小、按比例缩放、裁剪缩放、拉伸缩放。
      
      - 图片位置：支持设置为居中对齐、左对齐、右对齐、顶对齐、底对齐。
       
     
   
 
#### 交互
1. 单击"交互\> 交互定义 \> 编辑交互事件"，进入交互编辑页面（支持自定义背景组件）。
   图7交互编辑页面   
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001692288253.png "点击放大") 
2. 选择事件，支持设置为"点击"。
3. 添加动作，动作支持隐藏和显示（根据选择的组件显示不同的动作值）。
4. 单击"确定"，完成交互事件的设置。
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/public_sys-resources/note_3.0-zh-cn.png)
   - 数据过滤动作操作符分为string字符串类型、number数值类型、date日期类型。
     - string字符串类型支持的字符有精确匹配、不等于、包含、不包含、开头是、结尾是、为空、不为空。
     
     - number数值类型支持的字符有＝、≠、\>、≥、＜、≤、为空、不为空。
     
     - date日期类型支持的字符有＝、\>、≥、＜、≤。
      
   
   - 交互支持绑定数据集的SQL占位符。
     - 前提：在关联的数据集中编辑SQL，加入动态参数，将参数设置成全局生效。
     
     - 进入组件编辑页面，单击"交互"进行交互设置。