<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>echart</title> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="http://cdn.bootcss.com/echarts/3.5.3/echarts.js"></script> </head> <body> <div id="echart" style="width:800px;height:800px"> </div> <script> //初始化echart全局对象 var myChart = echarts.init(document.getElementById('echart')); //创建初始设置对象 包含一些设置参数 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); //显示数据加载图标 myChart.showLoading(); var dataAll = new Object(); dataAll.categories = new Array(); dataAll.data = new Array(); setInterval(function () { // 异步加载数据 $.get('data.json').done(function (data) { for (var i = 0; i < data.data.length; i++) { dataAll.categories.push(data.categories[i]); dataAll.data.push(data.data[i]); } //隐藏加载中的图标 myChart.hideLoading(); // 填入数据 myChart.setOption({ xAxis: { data: dataAll.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: dataAll.data }] }); }); }, 500); </script> </body> </html>