echarts（10）：旭日圖

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

ECharts 創建旭日圖很簡單，只需要在 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] 配置。

var data = [{
    name: 'Grandpa',
    children: [{
        name: 'Uncle Leo',
        value: 15,
        children: [{
            name: 'Cousin Jack',
            value: 2
        }, {
            name: 'Cousin Mary',
            value: 5,
            children: [{
                name: 'Jackson',
                value: 2
            }]
        }, {
            name: 'Cousin Ben',
            value: 4
        }]
    }, {
        name: 'Father',
        value: 10,
        children: [{
            name: 'Me',
            value: 5
        }, {
            name: 'Brother Peter',
            value: 1
        }]
    }]
}, {
    name: 'Nancy',
    children: [{
        name: 'Uncle Nike',
        children: [{
            name: 'Cousin Betty',
            value: 1
        }, {
            name: 'Cousin Jenny',
            value: 2
        }]
    }]
}];

option = {
    series: {
        type: 'sunburst',
        // highlightPolicy: 'ancestor',
        data: data,
        radius: [0, '90%'],
        label: {
            rotate: 'radial'
        }
    }
};

嘗試一下 »

如果不需要數據下鑽功能，可以通過將 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':

option = {
    silent: true,
    series: {
        radius: ['15%', '95%'],
        center: ['50%', '60%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'descendant',
        data: [{
            value: 10,
            children: [{
                name: 'target',
                value: 4,
                children: [{
                    value: 2,
                    children: [{
                        value: 1
                    }]
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }],
        label: {
            normal: {
                rotate: 'none',
                color: '#fff'
            }
        },
        levels: [],
        itemStyle: {
            color: 'yellow',
            borderWidth: 2
        },
        emphasis: {
            itemStyle: {
                color: 'red'
            }
        },
        highlight: {
            itemStyle: {
                color: 'orange'
            }
        },
        downplay: {
            itemStyle: {
                color: '#ccc'
            }
        }
    }
};

setTimeout(function () {
    myChart.dispatchAction({
        type: 'sunburstHighlight',
        targetNodeId: 'target'
    });
});

嘗試一下 »

highlightPolicy 為 'ancestor' :

option = {
    silent: true,
    series: {
        radius: ['15%', '95%'],
        center: ['50%', '60%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'ancestor',
        data: [{
            value: 10,
            children: [{
                value: 4,
                children: [{
                    value: 2,
                    children: [{
                        name: 'target',
                        value: 1
                    }]
                }, {
                    value: 1
                }, {
                    value: 0.5
                }]
            }, {
                value: 2
            }]
        }, {
            value: 4,
            children: [{
                children: [{
                    value: 2
                }]
            }]
        }],
        label: {
            normal: {
                rotate: 'none',
                color: '#fff'
            }
        },
        levels: [],
        itemStyle: {
            color: 'yellow',
            borderWidth: 2
        },
        emphasis: {
            itemStyle: {
                color: 'red'
            }
        },
        highlight: {
            itemStyle: {
                color: 'orange'
            }
        },
        downplay: {
            itemStyle: {
                color: '#ccc'
            }
        }
    }
};

setTimeout(function () {
    myChart.dispatchAction({
        type: 'sunburstHighlight',
        targetNodeId: 'target'
    });
});

嘗試一下 »

四、更多實例

• 旭日圖 1
• 旭日圖 2

更多旭日圖配置參考：https://www.echartsjs.com/zh/option.html#series-sunburst