echarts异步数据加载和更新

echarts中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

[javascript] view plain copy

1. var myChart = echarts.init(document.getElementById('main'));  
2.   
3. $.get('data.json').done(function (data) {  
4.     myChart.setOption({  
5.         title: {  
6.             text: '异步数据加载示例'  
7.         },  
8.         tooltip: {},  
9.         legend: {  
10.             data:['销量']  
11.         },  
12.         xAxis: {  
13.             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  
14.         },  
15.         yAxis: {},  
16.         series: [{  
17.             name: '销量',  
18.             type: 'bar',  
19.             data: [5, 20, 36, 10, 10, 20]  
20.         }]  
21.     });  
22. });  

或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

[javascript] view plain copy

1. var myChart = echarts.init(document.getElementById('main'));  
2. // 显示标题，图例和空的坐标轴  
3. myChart.setOption({  
4.     title: {  
5.         text: '异步数据加载示例'  
6.     },  
7.     tooltip: {},  
8.     legend: {  
9.         data:['销量']  
10.     },  
11.     xAxis: {  
12.         data: []  
13.     },  
14.     yAxis: {},  
15.     series: [{  
16.         name: '销量',  
17.         type: 'bar',  
18.         data: []  
19.     }]  
20. });  

异步加载

[javascript] view plain copy

1. $('#submit').click(function(){  
2.             var startTime = $("#start").val();  
3.             var endTime = $("#end").val();  
4.             var type = $('input:radio[name="type"]:checked').val();  
5.             $.post('/management/index.php?g=screen&m=index&a=proAjax',   
6.                     { start:startTime, end:endTime, type:type },function(data){  
7.                         myChart.setOption({  
8.                             xAxis: {  
9.                                 data: data.category  
10.                             },  
11.                             series: [{  
12.                                 // 根据名字对应到相应的系列  
13.                                 name: '日新增项目量',  
14.                                 data: data.data  
15.                             }]  
16.                         });  
17.             });  
18.               
19.         })  

对应/management/index.php?g=screen&m=index&a=proAjax的方法---基于thinkphp

[php] view plain copy

1. public function proAjax(){  
2.           
3.   
4.         $chart = $this->selectPro();//获取数据  
5.           
6.         $this->ajaxReturn($chart,'JSON');  
7.     }  

注：异步加载中data的数据是数组，不是字符串