上一篇：ECharts 事件處理下一篇：NPM 使用介紹

ECharts 旭日圖

旭日圖（Sunburst）由多層的環(huán)形圖組成，在數(shù)據(jù)結(jié)構(gòu)上，內(nèi)圈是外圈的父節(jié)點。因此，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。

ECharts 創(chuàng)建旭日圖很簡單，只需要在 series 配置項中聲明類型為 sunburst 即可，data 數(shù)據(jù)結(jié)構(gòu)以樹形結(jié)構(gòu)聲明，看下一個簡單的實例：

實例

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
? ? ? ? }]
? ? }
};

運行代碼 ?

顏色等樣式調(diào)整

默認情況下會使用全局調(diào)色盤 color 分配最內(nèi)層的顏色，其余層則與其父元素同色。

在旭日圖中，扇形塊的顏色有以下三種設(shè)置方式：

在 series.data.itemStyle 中設(shè)置每個扇形塊的樣式。
在 series.levels.itemStyle 中設(shè)置每一層的樣式。
在 series.itemStyle 中設(shè)置整個旭日圖的樣式。

上述三者的優(yōu)先級是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊將會覆蓋 series.levels.itemStyle 和 series.itemStyle 的設(shè)置。

下面，我們將整體的顏色設(shè)為灰色 #aaa，將最內(nèi)層的顏色設(shè)為藍色 blue，將 Aa、B 這兩塊設(shè)為紅色 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: [{
? ? ? ? ? ? // 留給數(shù)據(jù)下鉆的節(jié)點屬性
? ? ? ? }, {
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? color: 'blue'
? ? ? ? ? ? }
? ? ? ? }]
? ? }
};

運行代碼 ?

按層配置樣式是一個很常用的功能，能夠很大程度上提高配置的效率。

數(shù)據(jù)下鉆

旭日圖默認支持數(shù)據(jù)下鉆，也就是說，當點擊了扇形塊之后，將以該扇形塊的數(shù)據(jù)作為根節(jié)點，進一步顯示該數(shù)據(jù)的細節(jié)。

在數(shù)據(jù)下鉆后，圖形的中間會出現(xiàn)一個用于返回上一層的圖形，該圖形的樣式可以通過 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'
? ? ? ? }
? ? }
};

運行代碼 ?

如果不需要數(shù)據(jù)下鉆功能，可以通過將 nodeClick 設(shè)置為 false 來關(guān)閉，也可以設(shè)為 'link'，并將 data.link 設(shè)為點擊扇形塊對應(yīng)打開的鏈接。

高亮相關(guān)扇形塊

旭日圖支持鼠標移動到某扇形塊時，高亮相關(guān)數(shù)據(jù)塊的操作，可以通過設(shè)置 highlightPolicy，包括以下幾種高亮方式：

'descendant'（默認值）：高亮鼠標移動所在扇形塊與其后代元素；
'ancestor'：高亮鼠標所在扇形塊與其祖先元素；
'self'：僅高亮鼠標所在扇形塊；
'none'：不會淡化（downplay）其他元素。

上面提到的"高亮"，對于鼠標所在的扇形塊，會使用 emphasis 樣式；對于其他相關(guān)扇形塊，則會使用 highlight 樣式。通過這種方式，可以很方便地實現(xiàn)突出顯示相關(guān)數(shù)據(jù)的需求。

具體來說，對于配置項：

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'
? ? });
});

運行代碼 ?

中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

ECharts 旭日圖

實例

顏色等樣式調(diào)整

實例

數(shù)據(jù)下鉆

實例

高亮相關(guān)扇形塊

實例

實例

更多實例