ECharts - 15.旭日圖

旭日圖

旭日圖（Sunburst）由多層的環形圖組成，在數據結構上，內圈是外圈的父節點。因此，它既能像餅圖一樣表現局部和整體的佔比，又能像矩形樹圖一樣表現層級關係。

引入相關文件

旭日圖是 ECharts 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'
    }
}

highlightPolicy 爲 'descendant' 或 'ancestor' 的效果分別爲：

總結

上面的教程主要講述的是如何入門使用旭日圖，感興趣的用戶可以在 配置項手冊 查看更完整的文檔。在靈活應用這些配置項之後，就能做出豐富多彩的旭日圖了！