SVG形状

1. 概述

1.1 功能概述

Wyn系统提供自定义形状，支持用户上传SVG来描述形状，支持数据绑定和条件格式化。

2. 操作步骤

本文将指导您在Wyn中创建和使用拓扑图的自定义形状。

2.1 前提条件

1. 数据要求： 已完成数据连接与数据准备，本文将以本地Excel文件及缓存数据集为例演示操作流程。

2. 界面要求： 已进入仪表板设计界面，且仪表板至少已绑定一个数据集/数据模型（如“Excel数据-缓存数据集”）。

2.2 操作步骤

2.2.1 添加组件

1. 仪表板设计界面最左侧，单击组件按钮展开列表，选择SVG形状，按住鼠标左键将其拖拽至仪表板设计区域，成功添加一个SVG形状组件。

   
   

2.2.2 数据绑定

自定义形状的数据绑定上没有分类，只有数值的绑定，用户可以绑定任意类型的多个字段到组件上，来显示数据或者用户条件格式化。

1. 添加数据绑定：，选中组件， 选择目标数据集或者数据模型，直接拖拽字段到组件绑定区域，设定聚合方法。

   
   

2. 显示绑定数据： 选中组件，在右侧属性设置面板找到文本标签，在内容属性中插入绑定内容：

   
   

   1）单击插入字段按钮，在列表中选择绑定字段，就可以把绑定内容显示在文本区域。

   
   

   2）在内容属性编辑框中可以输入其他的描述性字符使得显示内容更加的易读。

   
   

   3）支持内容文本的字体设置、行高和位置设定：

   
   

2.2.3 组件属性

1. 数据处理完成后，可通过以下属性配置进一步优化组件展示效果：

   属性	说明	系统图示
   基础样式	自定义形状的样式，例如：设置圆角半径、背景色、背景图等属性
   数据交互	配置跳转、刷新等行为
   文本标签	设置形状的文本标签属性，包括显示文本、内容、字体设置等属性
   特殊数据	自定义空值/空白数据的显示规则
   布局大小	调整组件位置于整体尺寸
   外观样式	调整组件外观样式

2. SVG形状额外支持以下独有属性：

• 图表样式： 在属性设置中，可通过图表样式自动标记SVG形状的样式，例如：设置圆角半径、背景色、背景图等属性。

  属性	描述	示例
  背景色	指定SVG区域中的默认填充颜色，SVG中没有指定填充颜色节点会生效 等同于设定整个 SVG 根节点的 fill color
  边框颜色	指定SVG区域中的默认绘制颜色，SVG中没有指定填充颜色节点会生效 等同于设定整个 SVG 根节点的 stoke color
  不透明度
  水平翻转	设置SVG是否水平翻转
  垂直翻转	设置SVG是否垂直翻转
  SVG	SVG文件内容，支持用户上传一个本地的SVG文件， 或者粘贴一个SVG文件内容到输入框中

2.2.4 数据探索与分析

1. 组件内置丰富的数据探索与分析功能，从多角度挖掘数据价值，为您的可视化分析提供专业级支持。

   
   

2.2.4.1 条件格式化

1. 选中组件，单击添加格式化按钮，选择添加条件格式化进入条件格式化设置界面。

   
   

2. 基于组件绑定的数值字段，在条件设置界面中定义格式化规则，实现数据驱动的动态可视化效果。

   
   

3. 数字类型和文本类型的字段具有不同的比较方法，与基础图表一致。基础图形的条件格式化支持的样式属性包含两部分：基础样式和文本标签。

   基础样式	文本标签
   注意： 这里可以基于条件格式化来更换SVG图形，以此来实现一些特殊的效果。