① Liniendiagramm · Trend — Mausrad = Zoom · DataZoom-Slider unten · Drag = Pan
// ECharts Grundmuster – alles in einem option-Objekt
const chart = echarts.init(element);
chart.setOption({
xAxis: { type: 'time' }, // Zeitachse nativ!
yAxis: [{ name: '°C' }, { name: 'W', position: 'right' }],
dataZoom: [{ type: 'inside' }, { type: 'slider' }], // Zoom nativ!
series: [{ type: 'line', data: [[timestamp, wert], ...] }]
});
// Update: einfach nochmal setOption() mit neuen Daten
const chart = echarts.init(element);
chart.setOption({
xAxis: { type: 'time' }, // Zeitachse nativ!
yAxis: [{ name: '°C' }, { name: 'W', position: 'right' }],
dataZoom: [{ type: 'inside' }, { type: 'slider' }], // Zoom nativ!
series: [{ type: 'line', data: [[timestamp, wert], ...] }]
});
// Update: einfach nochmal setOption() mit neuen Daten
② Balkendiagramm · Energie pro Tag
// series: [{ type: 'bar', ... }]
series: [{ type: 'bar',
itemStyle: { borderRadius: [4,4,0,0] },
data: [1.2, 0.8, 1.5, 2.1, 0.4, 1.8, 2.3] }]
series: [{ type: 'bar',
itemStyle: { borderRadius: [4,4,0,0] },
data: [1.2, 0.8, 1.5, 2.1, 0.4, 1.8, 2.3] }]
③ Kreisdiagramm · Energiequellen
// series: [{ type: 'pie', ... }]
series: [{ type: 'pie',
radius: ['40%', '70%'], // Donut
data: [{ value: 55, name: 'Solar' }, ...] }]
series: [{ type: 'pie',
radius: ['40%', '70%'], // Donut
data: [{ value: 55, name: 'Solar' }, ...] }]