ECharts Asynchrones Laden von Daten
ECharts-Daten werden normalerweise in setOption festgelegt. Wenn wir Daten asynchron laden müssen, können wir Werkzeuge wie jQuery verwenden, und nachdem wir die Daten asynchron abgerufen haben, füllen wir die Daten und Konfigurationselemente einfach über setOption ein.
ECharts-Daten werden normalerweise in setOption festgelegt. Wenn wir Daten asynchron laden müssen, können wir Werkzeuge wie jQuery verwenden, und nachdem wir die Daten asynchron abgerufen haben, füllen wir die Daten und Konfigurationselemente einfach über setOption ein. JSON-Daten:echarts_test_data.json-Daten:
"data_pie" : [
{"value":235, "name":Video-Werbung},
{"value":274, "name":Affiliate-Werbung},
{"value":310, "name":E-Mail-Marketing},
{"value":335, "name":Direkter Zugriff},
{"value":400, "name":Suchmaschine}
]
}
Beispiel
$.get('https://www.example.com/static/js/echarts_test_data.json', function (data) {
myChart.setOption({
series : [
{
name: Traffic-Quelle,
type: 'pie', // Diagrammtyp auf Kreisdiagramm setzen
radius: '55%', // Der Radius des Kreisdiagramms: Der äußere Radius beträgt 55% der Größe des sichtbaren Bereichs (der kleinere Wert von Breite und Höhe des Containers).
data:data.data_pie
}
]
})
}, 'json')
Selbst ausprobieren »
Wenn das asynchrone Laden einige Zeit in Anspruch nimmt, können wir einen Ladeeffekt hinzufügen. ECharts bietet standardmäßig eine einfache Ladeanimation. Rufen Sie einfach die Methode showLoading auf, um sie anzuzeigen. Nach Abschluss des Ladens der Daten rufen Sie die Methode hideLoading auf, um die Ladeanimation auszublenden:
Beispiel
myChart.showLoading(); // Ladeeffekt aktivieren
$.get('https://www.example.com/static/js/echarts_test_data.json', function (data) {
myChart.hideLoading(); // Ladeeffekt ausblenden
myChart.setOption({
series : [
{
name: Traffic-Quelle,
type: 'pie', // Diagrammtyp auf Kreisdiagramm setzen
radius: '55%', // Der Radius des Kreisdiagramms: Der äußere Radius beträgt 55% der Größe des sichtbaren Bereichs (der kleinere Wert von Breite und Höhe des Containers).
data:data.data_pie
}
]
})
}, 'json')
Selbst ausprobieren »
Dynamische Datenaktualisierung
ECharts ist datengesteuert; Datenänderungen treiben Änderungen in der Diagrammanzeige voran, sodass die Implementierung dynamischer Daten extrem einfach wird.
Alle Datenaktualisierungen werden über setOption implementiert. Sie müssen nur in regelmäßigen Abständen Daten abrufen und sie an setOption übergeben, ohne sich Gedanken darüber machen zu müssen, welche Änderungen in den Daten tatsächlich aufgetreten sind. ECharts ermittelt die Unterschiede zwischen den beiden Datensätzen und verwendet dann geeignete Animationen, um die Änderungen darzustellen.
Beispiel
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
date.push(now);
data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
if (shift) {
date.shift();
data.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
addData();
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value'
},
series: [
{
name:'Transactions',
type:'line',
smooth:true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name:'Transactions',
data: data
}]
});
}, 500);
Selbst ausprobieren »