---
order: 23
navTitle: 旭日图
---
# 仪表板组件-旭日图

旭日图也称为太阳图，是一种圆环镶接图。在旭日图中，每个级别的数据都是旭日图中的一个圆环。越靠近内圈的圆环代表的数据级别越高，越往外，级别越低，分类越细。因此，旭日图既能像饼图一样表现局部和整体的占比，也能像[矩阵图](./treemap.md)一样表现数据的层次关系。

| 系列颜色 | 标签旋转 |
| :---------: | :--------: |
| ![颜色](./images/2023-06-06-16-08-48.png) | ![标签](./images/2023-06-06-16-10-31.png) |

## 使用旭日图组件{#start}

在旭日图中的**维度**选项中，按照旭日图从内到外、分类级别从高到低的顺序，依次将模型中的维度字段拖入，再将度量字段拖入到旭日图的**指标**中即可。

![操作步骤](./images/2023-06-07-09-13-11.gif)

1. 依次拖入【门店.门店级别】、【上下装】、【价格档次】拖入到旭日图的**维度**中
2. 将【销售数量（件）】字段拖入到旭日图的**指标**中
3. 分别设置【上下装】、【价格档次】字段属性，设置**颜色**为**继承上级**，**不透明度**设置为**70%**

## 属性介绍{#properties}

### 颜色

在旭日图组件的字段属性中，可以设置**维度**字段的颜色填充方式，提供7种颜色填充方式：

![颜色](./images/2023-06-07-10-35-54.png)

- **自动**：自动选择当前页面主题的第一个色板颜色进行填充，默认选择
- **无填充**：不进行颜色填充
- **颜色填充**：自定义颜色进行填充，可以选择纯色或渐变色进行填充
- **色板**：选择当前主题中的其他色板颜色进行填充，可以为特殊值设置指定颜色，但选择了**色板**填充时，需要拖入一个维段到**颜色**作为颜色填充依据。一级维度选择**色板**填充后，默认选择第二级字段作为颜色填充依据（可以手动更换成其他字段），二级及以下字段会自动选择自己本身作为颜色填充依据。如果当前旭日图只选择了一个维度，即默认选择自己本身作为颜色填充依据
- **色阶**：选择当前主题中的色阶渐变色进行填充，可以为不同数据范围区间设置指定的色阶变化范围。但选择了**色阶**填充时，需要拖入一个字段到**色阶**作为颜色填充依据。每个维度字段选择**色阶**时，默认将自己本身作为颜色填充依据（可以手动更换成其他字段）

| 色板填充 | 色阶填充 |
| :---------: | :--------: |
| ![色板](./images/2023-06-07-10-02-54.png) | ![色阶](./images/2023-06-07-10-05-55.png) |

- **继承上级**：二级及以下的维度字段，会自动继承上级的颜色，可以设置**不透明度**用于区分上下级数据
- **继承上级-渐变**：二级及以下的维度字段，会在自动继承上级的颜色情况下，自动形成同上级一个色系内颜色，从而形成整体的渐变色效果，支持设置**不透明度**

| 继承上级 | 继承上级-渐变 |
| :---------: | :--------: |
| ![继承上级](./images/2023-06-07-10-30-29.png) | ![继承渐变](./images/2023-06-07-10-33-35.png) |

在**样式**>**系列**>**填充**中，也可以针对指定系列进行颜色样式的填充设置。

![系列颜色](./images/2023-06-07-10-42-39.png)

### 布局

在**样式**>**组件**>**布局**中，可以设置旭日图的**外半径**、**内半径**、**起始角度**和**顺时针增长**。

旭日图内外半径效果，可参考下图：

![内外半径](./images/2023-06-07-10-53-42.png)

- **外半径**：以整个旭日图为整体，设置旭日图的外半径大小，默认75%
- **内半径**：以整个旭日图为整体，设置旭日图的内半径大小，默认为0%
- **起始角度**：设置旭日图的起始角度，默认为90°
- **顺时针增长**：设置旭日图中扇形数据是否顺时针增长，默认勾选

在**样式**>**系列**>**布局**中，可以单独以每一个系列为一个饼图，设置独自的内外半径大小。默认只有**外半径**选项，当设置了**外半径**后，自动显示**内边距**选项供用户设置。

![系列半径](./images/2023-06-07-11-03-36.png)

::: tip
**样式**>**系列**>**布局**中内外半径的优先级高于**样式**>**组件**>**布局**中内外半径优先级。
:::

### 标签

在旭日图组件的字段属性中，可以设置**标签**的样式，具体可参考[标签](../../design/data/data-style/label.md)。

![标签](./images/2023-06-07-11-36-55.png)

在**样式**>**系列**>**布局**中，可以单独以每一个系列设置标签样式。

| 径向旋转 | 切向旋转 | 固定角度（45°） |
| :---------: | :--------: | :--------: |
| ![径向旋转](./images/2023-06-07-11-41-45.png) | ![切向选择](./images/2023-06-07-11-44-40.png) | ![固定角度](./images/2023-06-07-11-46-34.png) |

提供如下属性：

![系列标签](./images/2023-06-07-11-56-21.png)

- **显示**：设置各个系列标签是否显示，默认显示标签
- **位置**：设置各个系列标签的显示位置，提供**内部居中**、**外部**两个位置显示，默认**内部居中**
- **选择**：设置标签显示的旋转方式，提供**径向旋转**、**切向旋转**和**固定角度**三种旋转方式，选择**固定角度**后，可以在**角度**中设置固定的旋转角度，默认**径向旋转**
- **隐藏微小标签**：设置各个系列标签的隐藏规则，当系列中的指标数据小于所设置范围时，该指标对应的维度标签就会自动隐藏，默认5%
- **字体**：设置标签内容字体，包括**字体**、**字号**、**斜体**、**颜色**
- **文字阴影**：设置标签内容的阴影，默认**无阴影**

### 边框

在**样式**>**系列**>**边框**中，单独为每一个系列设置边框，可以设置边框位置和线型。具体可参考[边框](../../design/type/basic/border.md)。

![边框](./images/2023-06-07-13-44-14.png)

### 圆角

在**样式**>**系列**>**圆角**中，单独为每一个系列设置圆角。具体可参考[圆角](../../design/type/basic/border-radius.md)。

![圆角](./images/2023-06-07-13-51-07.png)

### 阴影

在**样式**>**系列**>**阴影**中，单独为每一个系列设置阴影。具体可参考[阴影](../../design/type/basic/shadow.md)。

![阴影](./images/2023-06-07-14-03-50.png)

## 应用场景{#scenarios}

### 多环形嵌套

多环形嵌套效果，可以使旭日图整体布局效果更加明朗，更好的从视觉角度分析各级别数据的分布情况。

![多环形嵌套](./images/2023-06-07-15-04-48.png)

**实现方式**

通过给每个系列设置单独的内外半径，从内到外依次增大内外半径差，从而形成环形效果。上图效果设置参数如下：

- 【门店.门店级别】：**外半径**-40%，**内半径**-0%
- 【上下装】：**外半径**-70%，**内半径**-45%
- 【价格档次】：**外半径**-100%，**内半径**-75%

![实现方式-多环形](./images/2023-06-07-15-13-30.png)

### 立体效果

立体阴影效果的旭日图，让图形的展示更加立体化，饱满化。更适合一些需要特殊炫酷效果的场景。

![立体效果](./images/2023-06-07-15-18-03.png)

**实现方式**

通过给每个系列设置阴影效果，从而达到立体化的效果。上图效果设置参数如下：

- 【门店.门店级别】：无阴影
- 【上下装】：选择全阴影效果，**X**为0，**Y**为0，**模糊**为20，**扩展**为1，颜色透明度为34%（默认颜色）
- 【价格档次】：选择全阴影效果，**X**为0，**Y**为0，**模糊**为20，**扩展**为1，颜色透明度为20%（默认颜色）

![实现方式-立体](./images/2023-06-07-15-23-32.png)

### 圆角效果

圆角效果可以使旭日图的分布带有散点分布的特点，从而可以利用散点分布的密集程度，分析出各级数据的占比情况。

![圆角效果](./images/2023-06-07-15-19-22.png)

**实现方式**

通过给每个系列设置合适的**圆角**即可快速实现上图效果。

![实现方式-圆角](./images/2023-06-07-15-32-19.png)