SunburstGraph
旭日图组件。由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。
使用场景
- 适用于查看数据占比和数据支持下钻的场景。
API
Attributes
旭日图组件属性。
参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
---|---|---|---|---|---|
data | 图表数据。传入数据的格式参照 SunburstData | SunburstData[] | 是 | - | - |
option | 旭日图配置。传入数据的格式参照SunburstOptions | SunburstOptions[] | 否 | - | - |
SunburstData
旭日图 data 的格式。
参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
---|---|---|---|---|---|
value | 数据 | number | 是 | - | - |
name | 数据对应的名字,用于展示在扇形上 | string | 否 | - | - |
link | 点击节点跳转的超链接。须 SunburstOptions.nodeClick 值为 'link' 时才生效 | string | 否 | - | - |
target | 设置link的 target。同 a 标签的target | object | 否 | 'blank' | 'self' | - |
children | 下一层级的data | SunburstData | 否 | - | - |
SunburstOptions
旭日图配置
参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
---|---|---|---|---|---|
center | 旭日图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标 | string[] | number[] | 否 | - | - |
radius | 旭日图的半径 | Array<number | string> | number | string | 否 | - | - |
label | 描述了每个扇形块中,文本标签的样式, 具体请参考label | object | 否 | - | - |
labelLine | 标签的视觉引导线配置, 具体请参考labelLine | object | 否 | - | - |
itemStyle | 旭日图扇形块的样式, 具体请参考itemStyle | object | 否 | - | - |
nodeClick | 点击节点后的行为 | boolean | string | 否 | 'rootToNode' | 'link' | true | false | - |
sort | 扇形块根据数据 value 的排序方式,如果未指定 value,则其值为子元素 value 之和 | string | Function | 否 | 'desc' | 'asc' | 'null' | - |
renderLabelForZeroData | 如果数据没有 name,是否需要渲染文字 | boolean | 否 | - | - |
emphasis | 高亮状态配置, 具体请参考emphasis | object | 否 | - | - |
blur | 淡出状态配置。开启 emphasis.focus 后有效, 具体请参考blur | object | 否 | - | - |
select | 选中状态配置。开启 selectedMode 后有效, 具体请参考select | object | 否 | - | - |
levels | 旭日图层级结构配置 , 具体请参考level | object | 否 | - | - |
selectedMode | 选中模式的配置,表示是否支持多个选中,默认关闭 | boolean | string | 否 | 'single' | 'multiple' | series | true | false | - |