ECharts是一个非常流行的开源的可视化库。它可以帮助我们实现各种类型的图表,如柱状图、折线图、散点图等等。ECharts还提供了一个非常强大的特性,就是可以从JSON上的数据库读取数据集,使得我们可以在网页上实时地显示数据库中的数据。下面我们就来看一下如何在ECharts上加载JSON上的数据库。
// 通过ajax加载json数据 $.ajax({ type: "GET", url: "data.json", // 数据库地址 data: {}, dataType: "json", success: function (data) { var users = []; // 定义一个存放数据的数组 for (var i = 0; i< data.length; i++) { users.push({ 'name': data[i].name, 'age': data[i].age, 'sex': data[i].sex, 'city': data[i].city }); } }, error: function (xhr, textStatus, errorThrown) { console.log(xhr); console.log(textStatus); console.log(errorThrown); } }); // 将数据库中的数据传给ECharts option = { tooltip: {}, legend: { data: ['用户'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '用户', type: 'bar', data: [] }] }; // 将数据传给xAxis和series for (var i = 0; i< users.length; i++) { option.xAxis.data.push(users[i].name); option.series[0].data.push(users[i].age); }
上述代码中,我们通过ajax从json上的数据库中读取到数据,并存放在一个数组中。然后将数据传给ECharts的xAxis和series,最终实现了从JSON上的数据库加载数据集的效果。