ECharts Sunburst-Diagramm

Ein Sunburst-Diagramm besteht aus mehreren Schichten von Ringdiagrammen. In Bezug auf die Datenstruktur ist der innere Ring der Elternknoten des äußeren Rings. Daher kann es nicht nur den Anteil von Teilen am Ganzen wie ein Kreisdiagramm anzeigen, sondern auch hierarchische Beziehungen wie eine Treemap darstellen.

Das Erstellen eines Sunburst-Diagramms in ECharts ist sehr einfach. Sie müssen nur den Typ im Serien-Konfigurationselement alssunburstzu deklarieren. Das ist alles. Die Datenstruktur wird als Baumstruktur deklariert. Hier ist ein einfaches Beispiel:

Beispiel

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

Selbst ausprobieren »

Farben und andere Stile anpassen

Standardmäßig wird die globale Palettenfarbe verwendet, um Farben der innersten Ebene zuzuweisen, während die anderen Ebenen dieselbe Farbe wie ihre übergeordneten Elemente verwenden.

In einem Sunburst-Diagramm können die Farben der Sektorblöcke auf die folgenden drei Arten festgelegt werden:

In series.data.itemStyle legen Sie den Stil für jeden Sektor fest.
In series.levels.itemStyle legen Sie den Stil für jede Ebene fest.
Legen Sie den Stil des gesamten Sunburst-Diagramms in series.itemStyle fest.

Die Priorität der oben genannten drei ist von hoch nach niedrig, das heißt, Sektoren, die mit series.data.itemStyle konfiguriert sind, überschreiben die Einstellungen in series.levels.itemStyle und series.itemStyle.

Als Nächstes legen wir die Gesamtfarbe auf Grau#aaafest, legen die Farbe der innersten Ebene auf Blaubluefest und legen die beiden Blöcke Aa und B auf Rotred fest。

Beispiel

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: [{
// Knotenattribute für den Daten-Drilldown
}, {
itemStyle: {
color: 'blue'
}
}]
}
};

Selbst ausprobieren »

Das Konfigurieren von Stilen nach Ebene ist eine sehr verbreitete Funktion, die die Konfigurationseffizienz erheblich verbessern kann.

Daten-Drilldown

Das Sunburst-Diagramm unterstützt standardmäßig das Drill-down in Daten. Das heißt, nach dem Klicken auf einen Sektorblock werden die Daten dieses Sektorblocks als Wurzelknoten verwendet, um die Details der Daten weiter anzuzeigen.

Nach dem Daten-Drill-down erscheint in der Mitte des Diagramms eine Grafik, mit der zur vorherigen Ebene zurückgekehrt werden kann. Der Stil dieser Grafik kann über levels konfiguriert werden.

Beispiel

var data = [{
name: 'Opa',
children: [{
name: 'Onkel Leo',
value: 15,
children: [{
name: 'Cousin Jack',
value: 2
}, {
name: 'Cousine Mary',
value: 5,
children: [{
name: 'Jackson',
value: 2
}]
}, {
name: 'Cousin Ben',
value: 4
}]
}, {
name: 'Vater',
value: 10,
children: [{
name: 'Ich',
value: 5
}, {
name: 'Bruder Peter',
value: 1
}]
}]
}, {
name: 'Nancy',
children: [{
name: 'Onkel Nike',
children: [{
name: 'Cousine Betty',
value: 1
}, {
name: 'Cousine Jenny',
value: 2
}]
}]
}];

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

Selbst ausprobieren »

Wenn die Daten-Drilldown-Funktion nicht benötigt wird, können Sie sie deaktivieren, indem Sie nodeClick auf false setzen, oder nodeClick auf 'link' setzen und data.link auf den Link setzen, der geöffnet wird, wenn auf den Sektorblock geklickt wird.

Zugehörige Sektorblöcke hervorheben

Das Sunburst-Diagramm unterstützt das Hervorheben zugehöriger Datenblöcke, wenn der Mauszeiger über einen Sektor bewegt wird. Sie können highlightPolicy festlegen; diese enthält die folgenden Hervorhebungsmodi:

'descendant' (Standardwert): hebt den Sektorblock unter dem Mauszeiger und seine Nachfahrenelemente hervor;
'ancestor': hebt den Sektorblock unter dem Mauszeiger und seine Vorfahrenelemente hervor;
'self': hebt nur den Sektorblock unter dem Mauszeiger hervor;
'none': andere Elemente werden nicht abgeschwächt.

Der oben erwähnte "highlight" verwendet den emphasis-Stil für den Sektor unter der Maus und den highlight-Stil für andere zugehörige Sektoren. Auf diese Weise können Sie die Anforderung, zugehörige Daten hervorzuheben, einfach umsetzen.

Konkret zu den Konfigurationsoptionen:

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}

highlightPolicy ist 'descendant':

Beispiel

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

Selbst ausprobieren »

highlightPolicy ist 'ancestor':

Beispiel

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

Selbst ausprobieren »

Weitere Beispiele

Weitere Referenzen zur Konfiguration von Sunburst-Diagrammen:https://www.echartsjs.com/zh/option.html#series-sunburst

Weitere Erweiterungen