图标占比图

组件说明

图标占比图是展示不同图标的组件，可以通过图标系列添加的方式，添加多个图标，然后结合各个不同的数据指标，进行一个整体的展示

效果案例

图标占比图可以通过添加“图标系列”的方式添加多个图标进行数据效果的展示 An image

样式

在样式中可以设置组件的基本属性、全局、图标。

1. 基本属性

图层名称
图层的名称，会在页面左侧展示，允许重复
位置尺寸
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

2. 全局

An image

2.1 数字

2.1.1 保留小数

控制每一个数值保留几位小数

2.1.2 偏移

控制每一个数值偏移位置，X表示左偏移距离，Y表示上偏移距离

2.2 网格布局

可以通过网格布局，控制组件的行数和列数，增加的图标默认从左到右、从上到下

2.2.1 行数

控制组件的行数，顺序从上到下

2.2.2 列数

控制组件的列数，顺子从左到右

3. 图标

An image

3.1 图标系列

右上角操作按钮可以对图标进行增加或者删除

3.1.1 字段名

如果字段名与数据里的name的值对应，则会展示对应的value

3.1.2 文本样式

展示文本的样式，可以设置字体大小、颜色、粗细等

3.1.3 图片

设置图标的图片以及大小

3.1.4 偏移

设置图标的偏移位置，X表示左偏移距离，Y表示上偏移距离

数据

字段	说明
name	文本
value	值

点击查看数据结构

[
  {
    "name": "men",
    "value": 0.57
  },
  {
    "name": "women",
    "value": 0.43
  }
]

# 图标占比图

# 组件说明

# 效果案例

# 样式

# 1. 基本属性

# 2. 全局

# 2.1 数字

# 2.1.1 保留小数

# 2.1.2 偏移

# 2.2 网格布局

# 2.2.1 行数

# 2.2.2 列数

# 3. 图标

# 3.1 图标系列

# 3.1.1 字段名

# 3.1.2 文本样式

# 3.1.3 图片

# 3.1.4 偏移

# 数据