ECharts 常日数据设置在 setOption 中，如果我们须要异步加载数据，可以合营 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。 json 数据：
echarts_test_data.json 数据：{ "data_pie" : [ {"value":235, "name":"视频广告"}, {"value":274, "name":"同盟广告"}, {"value":310, "name":"邮件营销"}, {"value":335, "name":"直接访问"}, {"value":400, "name":"搜索引擎"} ]}
实例
var myChart = echarts.init(document.getElementById('main'));$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。 data:data.data_pie } ] })}, 'json')
考试测验一下 »如果异步加载须要一段韶光，我们可以添加 loading 效果，ECharts 默认有供应了一个大略的加载动画。只须要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐蔽加载动画：
实例
var myChart = echarts.init(document.getElementById('main'));myChart.showLoading(); // 开启 loading 效果$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.hideLoading(); // 隐蔽 loading 效果 myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。 data:data.data_pie } ] })}, 'json')
考试测验一下 »
数据的动态更新
ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得非常大略。
所有数据的更新都通过 setOption 实现，你只须要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变革，ECharts 会找到两组数据之间的差异然后通过得当的动画去表现数据的变革。
实例
var base = +new Date(2014, 9, 3);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:'成交', type:'line', smooth:true, symbol: 'none', stack: 'a', areaStyle: { normal: {} }, data: data } ]};setInterval(function () { addData(true); myChart.setOption({ xAxis: { data: date }, series: [{ name:'成交', data: data }] });}, 500);
学习下ECharts 异步加载数据 | 《Linux就该这么学》 (linuxprobe.com)
