ECharts
Apache ECharts ist eine leistungsstarke Open-Source-Chart-Bibliothek zur Erstellung interaktiver Datenvisualisierungen. Das ECharts-Plugin von Moraya ermoglicht es Ihnen, reichhaltige, interaktive Charts direkt in Ihren Markdown-Dokumenten einzubetten, indem Sie eine standard ECharts-JSON-Konfiguration in einem eingehegten Codeblock schreiben.
Syntax
Verwenden Sie den Sprach-Tag echarts fur einen eingehegten Codeblock. Der Inhalt ist ein JSON-Objekt, das dem ECharts-Options-Schema entspricht.
```echarts
{
"xAxis": { "type": "category", "data": ["A", "B", "C"] },
"yAxis": { "type": "value" },
"series": [{ "data": [10, 20, 30], "type": "bar" }]
}
```Das JSON-Objekt wird direkt an echarts.setOption() ubergeben, sodass jede gultige ECharts-Konfiguration funktioniert.
Beispiele
Balkendiagramm
Ein einfaches vertikales Balkendiagramm mit monatlichen Umsatzzahlen.
```echarts
{
"title": { "text": "Monthly Revenue", "left": "center" },
"tooltip": { "trigger": "axis" },
"xAxis": {
"type": "category",
"data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
},
"yAxis": {
"type": "value",
"axisLabel": { "formatter": "${value}k" }
},
"series": [
{
"name": "Revenue",
"type": "bar",
"data": [48, 52, 61, 55, 72, 68],
"itemStyle": { "color": "#5470c6" }
}
]
}
```Liniendiagramm mit Flachefullung
Ein Liniendiagramm mit Verlaufsfullung, das den Website-Traffic uber eine Woche zeigt.
```echarts
{
"title": { "text": "Daily Active Users", "left": "center" },
"tooltip": { "trigger": "axis" },
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": { "type": "value" },
"series": [
{
"name": "Users",
"type": "line",
"smooth": true,
"data": [8200, 9320, 9010, 13450, 12600, 10280, 7540],
"areaStyle": {
"color": {
"type": "linear",
"x": 0, "y": 0, "x2": 0, "y2": 1,
"colorStops": [
{ "offset": 0, "color": "rgba(84,112,198,0.5)" },
{ "offset": 1, "color": "rgba(84,112,198,0.05)" }
]
}
}
}
]
}
```Kreisdiagramm
Ein Kreisdiagramm mit Legende, das Browser-Marktanteile zeigt.
```echarts
{
"title": { "text": "Browser Market Share", "left": "center" },
"tooltip": { "trigger": "item", "formatter": "{b}: {d}%" },
"legend": { "orient": "vertical", "left": "left", "top": "middle" },
"series": [
{
"name": "Browser",
"type": "pie",
"radius": "60%",
"center": ["55%", "50%"],
"data": [
{ "value": 65, "name": "Chrome" },
{ "value": 12, "name": "Safari" },
{ "value": 8, "name": "Firefox" },
{ "value": 7, "name": "Edge" },
{ "value": 8, "name": "Other" }
],
"emphasis": {
"itemStyle": { "shadowBlur": 10, "shadowColor": "rgba(0,0,0,0.3)" }
}
}
]
}
```Streudiagramm
Ein Streudiagramm, das die Korrelation zwischen Lernstunden und Prufungsergebnissen zeigt.
```echarts
{
"title": { "text": "Study Hours vs Exam Score", "left": "center" },
"tooltip": {
"formatter": "Hours: {c0}<br/>Score: {c1}"
},
"xAxis": { "type": "value", "name": "Hours Studied" },
"yAxis": { "type": "value", "name": "Score" },
"series": [
{
"type": "scatter",
"symbolSize": 12,
"data": [
[1.5, 52], [2.0, 58], [2.5, 63], [3.0, 67], [3.5, 70],
[4.0, 74], [4.5, 78], [5.0, 82], [5.5, 79], [6.0, 88],
[6.5, 85], [7.0, 91], [7.5, 89], [8.0, 95], [8.5, 93],
[2.0, 45], [3.0, 55], [4.0, 62], [5.0, 71], [6.0, 80]
],
"itemStyle": { "color": "#91cc75" }
}
]
}
```Radardiagramm
Ein Radardiagramm zum Vergleich der Kompetenzprofile zweier Teammitglieder.
```echarts
{
"title": { "text": "Developer Skill Comparison", "left": "center" },
"tooltip": {},
"legend": { "data": ["Alice", "Bob"], "top": "bottom" },
"radar": {
"indicator": [
{ "name": "Frontend", "max": 100 },
{ "name": "Backend", "max": 100 },
{ "name": "DevOps", "max": 100 },
{ "name": "Testing", "max": 100 },
{ "name": "Design", "max": 100 },
{ "name": "Communication", "max": 100 }
]
},
"series": [
{
"type": "radar",
"data": [
{
"value": [92, 65, 50, 70, 85, 78],
"name": "Alice",
"areaStyle": { "opacity": 0.2 }
},
{
"value": [60, 90, 88, 82, 40, 72],
"name": "Bob",
"areaStyle": { "opacity": 0.2 }
}
]
}
]
}
```Gestapeltes Balkendiagramm
Ein gestapeltes Balkendiagramm mit vierteljahrigen Umsatzen nach Produktkategorie.
```echarts
{
"title": { "text": "Quarterly Sales by Category", "left": "center" },
"tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } },
"legend": { "top": "bottom" },
"xAxis": {
"type": "category",
"data": ["Q1 2025", "Q2 2025", "Q3 2025", "Q4 2025"]
},
"yAxis": { "type": "value", "name": "Sales ($k)" },
"series": [
{
"name": "Electronics",
"type": "bar",
"stack": "total",
"data": [320, 380, 350, 420]
},
{
"name": "Clothing",
"type": "bar",
"stack": "total",
"data": [180, 210, 240, 195]
},
{
"name": "Books",
"type": "bar",
"stack": "total",
"data": [95, 110, 88, 130]
},
{
"name": "Home & Garden",
"type": "bar",
"stack": "total",
"data": [140, 165, 190, 175]
}
]
}
```Kombiniertes Linien- und Balkendiagramm
Ein kombiniertes Diagramm mit Balken fur den Umsatz und Linie fur die Gewinnmarge.
```echarts
{
"title": { "text": "Revenue & Profit Margin", "left": "center" },
"tooltip": { "trigger": "axis" },
"legend": { "top": "bottom" },
"xAxis": {
"type": "category",
"data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
},
"yAxis": [
{ "type": "value", "name": "Revenue ($k)", "position": "left" },
{ "type": "value", "name": "Margin (%)", "position": "right", "min": 0, "max": 50 }
],
"series": [
{
"name": "Revenue",
"type": "bar",
"data": [150, 180, 210, 195, 230, 245],
"itemStyle": { "color": "#5470c6" }
},
{
"name": "Profit Margin",
"type": "line",
"yAxisIndex": 1,
"data": [22, 25, 28, 24, 31, 33],
"smooth": true,
"itemStyle": { "color": "#ee6666" }
}
]
}
```Kerzendiagramm
Ein Kerzendiagramm fur Aktienkursdaten mit Volumensbalken.
```echarts
{
"title": { "text": "ACME Corp Stock Price", "left": "center" },
"tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } },
"xAxis": {
"type": "category",
"data": ["Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 10", "Mar 11", "Mar 12"]
},
"yAxis": { "type": "value", "min": 140, "scale": true },
"series": [
{
"name": "Stock",
"type": "candlestick",
"data": [
[148.5, 152.3, 147.0, 153.1],
[152.0, 150.2, 149.5, 153.8],
[150.5, 155.8, 150.0, 156.2],
[155.0, 153.1, 151.8, 156.0],
[153.5, 157.2, 152.9, 158.0],
[157.0, 160.5, 156.2, 161.3],
[160.0, 158.3, 157.1, 161.0],
[158.5, 162.1, 157.8, 163.0]
]
}
]
}
```Heatmap
Eine Heatmap, die Commit-Aktivitat nach Wochentag und Uhrzeit zeigt.
```echarts
{
"title": { "text": "Commit Activity Heatmap", "left": "center" },
"tooltip": {
"position": "top",
"formatter": "{c2} commits"
},
"xAxis": {
"type": "category",
"data": ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
"splitArea": { "show": true }
},
"yAxis": {
"type": "category",
"data": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"splitArea": { "show": true }
},
"visualMap": {
"min": 0,
"max": 20,
"calculable": true,
"orient": "horizontal",
"left": "center",
"bottom": 0,
"inRange": { "color": ["#f0f0f0", "#5470c6"] }
},
"series": [
{
"type": "heatmap",
"data": [
[0,0,1],[1,0,0],[2,0,0],[3,0,2],[4,0,5],[5,0,3],[6,0,1],[7,0,0],
[0,1,0],[1,1,0],[2,1,3],[3,1,12],[4,1,15],[5,1,18],[6,1,8],[7,1,2],
[0,2,0],[1,2,0],[2,2,4],[3,2,14],[4,2,16],[5,2,20],[6,2,10],[7,2,1],
[0,3,1],[1,3,0],[2,3,5],[3,3,11],[4,3,13],[5,3,17],[6,3,9],[7,3,3],
[0,4,0],[1,4,0],[2,4,6],[3,4,15],[4,4,18],[5,4,19],[6,4,7],[7,4,1],
[0,5,0],[1,5,0],[2,5,2],[3,5,10],[4,5,12],[5,5,14],[6,5,5],[7,5,0],
[0,6,2],[1,6,0],[2,6,0],[3,6,4],[4,6,6],[5,6,4],[6,6,2],[7,6,1]
],
"label": { "show": true }
}
]
}
```Tachometerdiagramm
Ein Tachometerdiagramm, das einen Systemgesundheitswert anzeigt.
```echarts
{
"series": [
{
"type": "gauge",
"startAngle": 180,
"endAngle": 0,
"min": 0,
"max": 100,
"progress": { "show": true, "width": 18 },
"axisLine": { "lineStyle": { "width": 18 } },
"axisTick": { "show": false },
"splitLine": { "length": 10, "lineStyle": { "width": 2 } },
"axisLabel": { "distance": 25, "fontSize": 12 },
"pointer": { "length": "60%", "width": 6 },
"detail": {
"valueAnimation": true,
"formatter": "{value}%",
"fontSize": 24,
"offsetCenter": [0, "40%"]
},
"title": {
"offsetCenter": [0, "70%"],
"fontSize": 14
},
"data": [
{
"value": 87,
"name": "System Health",
"itemStyle": { "color": "#91cc75" }
}
]
}
]
}
```