淘先锋技术网

首页 1 2 3 4 5 6 7

echarts是一款强大的数据可视化工具,在前端界广受欢迎,它可以用来制作各种图表,可谓是前端中的“图表之王”。但是,如果想要实现一些动态效果,比如折线图动态获取json数据更新图表,就需要一些特殊的操作。

下面就来看一下具体的操作步骤:

var myChart = echarts.init(document.getElementById('main'));
var option = {};
myChart.setOption(option);
// 使用Ajax获取json数据
$.ajax({
type: 'GET',
url: 'data.json',
dataType: 'json',
success: function (data) {myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '销量',
data: data.data
}]
});
},
error: function (error) {
console.log(error);
}
});
// 定时更新数据
setInterval(function () {
$.ajax({
type: 'GET',
url: 'data.json',
dataType: 'json',
success: function (data) {myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '销量',
data: data.data
}]
});
},
error: function (error) {
console.log(error);
}
});
}, 30000);

通过以上代码,我们可以实现折线图动态获取json数据更新图表的效果。其中,我们使用了Ajax来获取json数据,并进行了预处理。并且为了保持数据的实时更新,我们使用了setInterval定时器来进行数据的更新。