ECharts Kreisdiagramm
In den vorherigen Kapiteln haben wir gelernt, ECharts zu verwenden, um ein einfaches Balkendiagramm zu zeichnen. In diesem Kapitel zeichnen wir ein Kreisdiagramm.
Ein Kreisdiagramm verwendet hauptsächlich die Kreisbögen der Sektoren, um den Anteil der Daten verschiedener Kategorien am Gesamtwert darzustellen. Sein Datenformat ist einfacher als das eines Balkendiagramms, mit nur eindimensionalen Werten, und es werden keine Kategorien benötigt. Da es sich nicht auf einem kartesischen Koordinatensystem befindet, werden xAxis und yAxis ebenfalls nicht benötigt.
Beispiel
myChart.setOption({
series : [
{
name: 'Verkehrsquelle',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'Videowerbung'},
{value:274, name:'Affiliate-Anzeige'},
{value:310, name:'E-Mail-Marketing'},
{value:335, name:'Direkter Zugriff'},
{value:400, name:'Suchmaschine'}
]
}
]
})
Selbst ausprobieren »
Wir können außerdem, indem wir Parameter festlegen,roseType: 'angle'das Kreisdiagramm als Nightingale-Diagramm anzeigen.
Beispiel
option = {
series : [
{
name: 'Zugriffsquelle',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'Videowerbung'},
{value:274, name:'Affiliate-Anzeige'},
{value:310, name:'E-Mail-Marketing'},
{value:335, name:'Direkter Zugriff'},
{value:400, name:'Suchmaschine'}
]
}
]
};
Selbst ausprobieren »
Schattenkonfiguration
Der itemStyle-Parameter kann Dinge wie Schatten, Transparenz, Farbe, Rahmenfarbe, Rahmenbreite usw. festlegen:
Beispiel
option = {
series : [
{
name: 'Zugriffsquelle',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'Videowerbung'},
{value:274, name:'Affiliate-Anzeige'},
{value:310, name:'E-Mail-Marketing'},
{value:335, name:'Direkter Zugriff'},
{value:400, name:'Suchmaschine'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Selbst ausprobieren »
Weitere Erweiterungen