一、基本概念
echarts是百度開源的一個專注于數(shù)據(jù)可視化的圖表庫。在使用echarts進行動態(tài)數(shù)據(jù)展示時,經(jīng)常需要更新圖表的數(shù)據(jù)。更新數(shù)據(jù)時,可以使用setOption方法重新渲染整個圖表,也可以使用一些更靈活的方法避免重繪整個圖表而只更新部分數(shù)據(jù)。這些方法包括數(shù)據(jù)動態(tài)修改、動態(tài)增加數(shù)據(jù)、異步加載數(shù)據(jù)、基于時間軸更新數(shù)據(jù)等等。這些方法的使用可以提高數(shù)據(jù)展示的效率和用戶體驗,減小對服務器的負載。
二、數(shù)據(jù)動態(tài)修改
數(shù)據(jù)動態(tài)修改是一種直接修改echarts實例的數(shù)據(jù)option的方式。我們可以通過創(chuàng)建echarts實例時的option中的series數(shù)組中對應的數(shù)據(jù)項進行修改。如下例所示,我們更新了第一個系列的第一個數(shù)據(jù)項的value的值。修改后的數(shù)據(jù)能夠自動更新到圖表中。
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
option.series[0].data[0] = 150; // 修改第一個系列的第一個數(shù)據(jù)項的值
myChart.setOption(option); // 更新圖表
三、動態(tài)增加數(shù)據(jù)
動態(tài)增加數(shù)據(jù)是指在已有的數(shù)據(jù)集之上增加新的數(shù)據(jù),而不是替換原有的數(shù)據(jù)集。我們可以通過調(diào)用setOption方法來實現(xiàn)動態(tài)增加數(shù)據(jù)。添加數(shù)據(jù)時,需要將新的數(shù)據(jù)添加到對應系列的data數(shù)組中。如下例所示,我們添加了一條新的線性數(shù)據(jù)到第一個系列的data數(shù)組末端。添加后的數(shù)據(jù)能夠自動更新到圖表中。
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
option.series[0].data.push(90); // 向第一個系列的data末尾添加一個數(shù)據(jù)
myChart.setOption(option); // 更新圖表
四、異步加載數(shù)據(jù)
異步加載數(shù)據(jù)是指在數(shù)據(jù)加載完成之后,再將數(shù)據(jù)渲染到圖表中。異步加載數(shù)據(jù)主要應用于處理大量數(shù)據(jù)或者需要對數(shù)據(jù)進行篩選處理的情況。我們可以使用異步加載數(shù)據(jù)源并處理數(shù)據(jù)后再渲染圖表。具體實現(xiàn)可以使用echarts提供的ajax組件或者其他異步加載方式。如下例所示,我們使用了ajax組件加載數(shù)據(jù)源,然后對數(shù)據(jù)進行處理,最后將處理后的數(shù)據(jù)渲染到圖表中。
$.get('data.json').done(function (data) {
// 對數(shù)據(jù)進行處理
var processedData = processData(data);
var option = {
xAxis: {
type: 'category',
data: processedData.categories
},
yAxis: {
type: 'value'
},
series: [{
data: processedData.data,
type: 'line'
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
});
五、基于時間軸更新數(shù)據(jù)
基于時間軸更新數(shù)據(jù)是指在圖表已有基礎上,根據(jù)時間軸變化來更新圖表數(shù)據(jù)。我們可以使用echarts提供的時間軸組件對數(shù)據(jù)進行更新。可以使用時間軸組件提供的多種方式進行數(shù)據(jù)的更新,如單擊時間點,拖動時間軸,自動播放等等。如下例所示,我們使用下方的時間軸對圖表中的數(shù)據(jù)進行了更新。
var option = {
baseOption: {
timeline: {
data: ['2014', '2015', '2016', '2017', '2018', '2019'],
loop: false,
autoPlay: false,
currentIndex: 0,
playInterval: 1000,
controlStyle: {
position: 'left'
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
name: '2014'
}, {
data: [150, 220, 170, 90, 80, 120, 150],
type: 'line',
name: '2015'
}, {
data: [180, 230, 190, 100, 90, 130, 170],
type: 'line',
name: '2016'
}]
},
options: [{
title: {
text: '2014年數(shù)據(jù)'
},
series: [{
name: '2014'
}]
}, {
title: {
text: '2015年數(shù)據(jù)'
},
series: [{
name: '2015'
}]
}, {
title: {
text: '2016年數(shù)據(jù)'
},
series: [{
name: '2016'
}]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
myChart.on('timelinechanged', function (params) {
var currentIndex = params.currentIndex;
var series = option.baseOption.series;
for (var i = 0, l = series.length; i < l; i++) {
series[i].data = timelineData[currentIndex].data[i];
}
myChart.setOption(option);
});