ECharts 旭日圖

旭日圖(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'
    });
});

嘗試一下 ?

更多實例

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