2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列——旭日图。


普通旭日图:

文艺旭日图:


2B 旭日图——这货真的长得像个旭日啊 щ(゚Д゚щ):

可能大家印象中的旭日图就只能做到上面“普通旭日图”的样子了,很难想象这么有设计感的作品,居然可以是通过配置项写出来的吧?(羡婆卖瓜~)

因为这可是 ECharts 家的旭日图呀!

除了颜值之外,我们还提供了丰富的功能使得旭日图更加好用,包括:数据下钻、视觉映射、多种高亮方式及交互处理等等。我们力求用(黑)科技让可视化变得更简单,只要跟着这篇教程,就能轻松上手!

(上课铃声响起~~~)


大家对“旭日图”(Sunburst)这个名称可能有些陌生,但事实上在我们推出旭日图之前,在 ECharts 作品展示平台 Gallery 上,已经有用户使用非常 naive 的方式自己折腾出旭日图了——

用多层饼图实现的“旭日图”,来自社区的作品:ECharts Gallery


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


引入相关文件

旭日图是 ECharts 4.0 新增的图表类型,在官网下载页面下载“完整版” ECharts,并将下载的 JavaScript 文件引入即可创建旭日图。

最简单的旭日图

创建旭日图需要在 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.itemStyleseries.itemStyle 的设置。

下面,我们将整体的颜色设为灰色 '#aaa',将最内层的颜色设为蓝色 'blue',将 AaB 这两块设为红色 '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'
    }
}

highlightPolicy'descendant''ancestor' 的效果分别为:



总结

上面的教程主要讲述的是如何入门使用旭日图,感兴趣的用户可以在 配置项手册 查看更完整的文档。在灵活应用这些配置项之后,就能做出丰富多彩的旭日图了!