大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

《Apache ECharts教程》

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

在这里插入图片描述

引入相关文件

旭日图是 Apache EChartsTM 4.0 新增的图表类型，从 CDN 引入完整版的 echarts.min.js

最简单的旭日图

创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’ 的系列，并且以树形结构声明其 data：

var option = { 
   
    series: { 
   
        type: 'sunburst',
        data: [{ 
   
            name: 'A',
            value: 10,
            children: [{ 
   
                value: 3,
                name: 'Aa'
            }, { 
   
                value: 5,
                name: 'Ab'
            }]
        }, { 
   
            name: 'B',
            children: [{ 
   
                name: 'Ba',
                value: 4
            }, { 
   
                name: 'Bb',
                value: 2
            }]
        }, { 
   
            name: 'C',
            value: 3
        }]
    }
};

得到以下结果：

在这里插入图片描述

颜色等样式调整

默认情况下会使用全局调色盘 color 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：

在 series.data.itemStyle 中设置每个扇形块的样式；
在 series.levels.itemStyle 中设置每一层的样式；
在 series.itemStyle 中设置整个旭日图的样式。
上述三者的优先级是从高到低的，也就是说，配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置。

下面，我们将整体的颜色设为灰色 ‘#aaa’，将最内层的颜色设为蓝色 ‘blue’，将 Aa、B 这两块设为红色 ‘red’。

var option = { 
   
    series: { 
   
        type: 'sunburst',
        data: [{ 
   
            name: 'A',
            value: 10,
            children: [{ 
   
                value: 3,
                name: 'Aa',
                itemStyle: { 
   
                    color: 'red'
                }
            }, { 
   
                value: 5,
                name: 'Ab'
            }]
        }, { 
   
            name: 'B',
            children: [{ 
   
                name: 'Ba',
                value: 4
            }, { 
   
                name: 'Bb',
                value: 2
            }],
            itemStyle: { 
   
                color: 'red'
            }
        }, { 
   
            name: 'C',
            value: 3
        }],
        itemStyle: { 
   
            color: '#aaa'
        },
        levels: [{ 
   
            // 留给数据下钻的节点属性
        }, { 
   
            itemStyle: { 
   
                color: 'blue'
            }
        }]
    }
};

效果为：
在这里插入图片描述

按层配置样式

旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 levels 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。

例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：


series: { 
   
    // ...
    levels: [
        { 
   
            // 留给数据下钻点的空白配置
        },
        { 
   
            // 最靠内测的第一层
            itemStyle: { 
   
                color: 'red'
            },
            label: { 
   
                color: 'blue'
            }
        },
        { 
   
            // 第二层 ...
        }
    ]
}

在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。

数据下钻

旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。
在这里插入图片描述

当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 levels[0] 配置。

如果不需要数据下钻功能，可以通过将 nodeClick 设置为 false 关闭；或者将其设为 ‘link’，并将 data.link 设为点击扇形块对应打开的链接。

高亮相关扇形块

旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 highlightPolicy，包括以下几种高亮方式：

‘descendant’（默认值）：高亮鼠标移动所在扇形块与其后代元素；
‘ancestor’：高亮鼠标所在扇形块与其祖先元素；
‘self’：仅高亮鼠标所在扇形块；
‘none’：不会淡化（downplay）其他元素。

上面提到的“高亮”，对于鼠标所在的扇形块，会使用 emphasis 样式；对于其他相关扇形块，则会使用 highlight 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。

具体来说，对于配置项：


itemStyle: { 
   
    color: 'yellow',
    borderWidth: 2,
    emphasis: { 
   
        color: 'red'
    },
    highlight: { 
   
        color: 'orange'
    },
    downplay: { 
   
        color: '#ccc'
    }
}