# 旭日图4.2+

旭日图由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 不同层级的颜色。第一项表示数据下钻后返回上级的图形颜色，其后的每一项分别表示从圆心向外层的图形颜色。

# 系列

系列名称： 用于提示框的显示，也用于开启下钻后返回上级的文本。
点击节点行为： 开启后，点击节点后以该节点为根节点，简称为数据下钻，也就是说，当用户点击了某个扇形块之后，将会以该节点作为根结点显示，并且在中间出现一个返回上层节点的圆。
排序： 扇形块排序方式。
坐标半径
- X 坐标： 旭日图的中心横坐标。
- Y 坐标： 旭日图的中心纵坐标。
- 内半径： 旭日图的内半径。
- 外半径： 旭日图的外半径。
普通状态：
- 文本标签
  - 显示： 是否显示文本。
  - 小于角度隐藏： 当某个扇形块的角度小于该值（角度制）时，扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
    - {@xxx}：数据中名为 xxx 的维度的值，如 {@product}表示名为 'product' 的维度的值。
    - {@[n]}：数据中维度 n 的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
    例如：
```
  {b}: {c}
```
    - 回调函数： 示例：
```
  return data.value[1];
```
    参数 data 是内容格式器需要的单个数据参数。格式如下：
```
  {
      // 传入的原始数据项
      data: {
         name: string,
         // 系列数据
         value: Array,
         // 源节点
         source: string|number,
         // 目标节点
         target: string|number
      },
      // 数据在传入的data数组中的index
      dataIndex: number|Array,
      // 系列在传入的option,series中的index
      seriesIndex: number
  }
```
  - 位置： 文本的位置。
  - 文字距离： 文本距节点的位置。
  - 文字旋转： 文本标签字体的旋转角度。也可以设置径向旋转和切向旋转。
  - 文字偏移： 对文本进行偏移。
  - 水平对齐： 文字对齐方式。左表示靠近内圈，右表示靠近外圈。
  - 垂直对齐： 文字垂直对齐方式。
  - 宽高： 文本显示宽度和高度。
  - 超出宽度： 文字超出宽度是否截断或者换行。配置宽度时有效。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式
  - 颜色： 图形颜色。
  - 描边颜色： 图形描边颜色。
  - 描边线宽： 图形描边宽度。
  - 描边类型： 图形描边类型。
  - 圆角： 旭日图扇形区块的内外圆角半径。
  - 阴影属性： 在垂直方向和水平方向上的阴影，同时可以设置模糊效果。
高亮状态： 鼠标放到扇区上时高亮的样式。
- 聚焦效果： 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。其余属性配置与普通状态相同。
选中状态： 选中状态下扇区的样式，选择模式为单选或多选时生效。
- 选择模式：
  - 不可选
  - 单选
  - 多选其余属性配置与普通状态相同。
层级配置： 旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了层级配置项。
- 指定层级： 其中第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。
- 内半径： 当前层的内半径。
- 外半径： 当前层的外半径。
- 普通状态：
  
  其属性配置与普通状态相同。
- 高亮状态：
  
  其属性配置与高亮状态相同。
- 选中状态：
  
  其属性配置与选中状态相同。

层级配置

初始动画：
- 开启动画 是否开启初始动画。
- 动画时长（ms）： 初始动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
- 缓动效果 初始动画的缓动效果。

# 数据

# 静态数据

上图中的示例JSON代码如下：

[
  {
    "source": "",
    "target": "1",
    "name": "法学",
    "value": 3
  },
  {
    "source": "1",
    "target": "2",
    "name": "政治",
    "value": 3
  },
  {
    "source": "2",
    "target": "3",
    "name": "国际",
    "value": 1
  },
  {
    "source": "2",
    "target": "4",
    "name": "外交",
    "value": 2
  },
  {
    "source": "",
    "target": "5",
    "name": "工学",
    "value": 25
  },
  {
    "source": "5",
    "target": "6",
    "name": "电子",
    "value": 15
  },
  {
    "source": "5",
    "target": "7",
    "name": "地质",
    "value": 10
  },
  {
    "source": "7",
    "target": "8",
    "name": "勘察",
    "value": 5
  },
  {
    "source": "7",
    "target": "9",
    "name": "资源",
    "value": 1
  },
  {
    "source": "6",
    "target": "10",
    "name": "水利",
    "value": 2
  },
  {
    "source": "6",
    "target": "11",
    "name": "通信",
    "value": 5
  },
  {
    "source": "6",
    "target": "12",
    "name": "能源",
    "value": 4
  },
  {
    "source": "11",
    "target": "13",
    "name": "广播",
    "value": 2
  }
]

源节点
目标节点
节点数据
- name： 扇区的名称。
- value： 扇区的大小。

# 数据资源

# 交互

勾选启用，开启组件交互功能。当单击扇区时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 扇区单击事件

勾选启用，开启单击扇区交互功能。

# 扇区悬停事件

勾选启用，开启扇区悬停交互功能。

# 扇区移出事件

勾选启用，开启扇区移出交互功能。

# 数据响应

旭日图支持数据响应配置。

# 节点编程

# 事件

图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
扇区单击事件： 扇区单击触发事件。
- 抛出的参数： 扇区所携带的数据。
扇区悬停事件： 鼠标在扇区悬停时触发事件。
- 抛出的参数： 扇区所携带的数据。
扇区移出事件： 鼠标从扇区移出时触发事件。
- 抛出的参数： 扇区所携带的数据。

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

← 垂直布局桑基图环形旭日图 →