旭日图

ECharts 旭日图

概述

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

旭日图的创建

ECharts 创建旭日图很简单，只需要在 series 配置项中声明类型为 sunburst 即可，data 数据结构以树形结构声明，看下一个简单的实例：

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title:{
                text:'树懒课堂七月收入统计',
                subtext:'纯属虚构',
            },
            series: {
                type: 'sunburst',
                data: [{
                    name: '广告收入',
                    value: 20,
                    children: [{
                        value: 11,
                        name: '文字广告'
                    }, {
                        value: 7,
                        name: '视频广告'
                    }]
                }, {
                    name: '网课收入',
                    value:15,
                    children: [{
                        name: '在线直播',
                        value: 8
                    }, {
                        name: '离线课程',
                        value: 7
                    }]
                }, {
                    name: '其他',
                    value: 3
                }]
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果图

旭日图的数据下钻

概述

旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，进一步显示该数据的细节。
在数据下钻后，图形的中间会出现一个用于返回上一层的图形，该图形的样式可以通过 levels[0] 配置。

实例

如下图所示，在上面的例子中，点击“网课收入”后，会进行对应的数据下钻

数据下钻前

点击“网课收入”数据下钻后

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

折线图代码实例及注释旭日图的颜色等样式调整