echarts异步加载获取数据

   在做项目中遇到了一个echarts异步加载数据的填充,首先,查看官方文档示例,了解相关属性之后,再去了解异步请求的相关属性,之后在异步中进行定义横坐标和值数组定义,通过遍历获取result的值存放在定义的数组中,最后存放在data下便实现异步加载获取数据,以下是示例:

function test(){
           var myChart = echarts.init(document.getElementById('main'));
             // 显示标题,图例和空的坐标轴
             myChart.setOption({
                 title: {
                     text: '预计生产产量'
                 },
                 tooltip: {},
                 toolbox: {
                     feature: {
                         dataView: {show: true, readOnly: false},
                         magicType: {show: true, type: ['line', 'bar']},
                         restore: {show: true},
                         saveAsImage: {show: true}
                     }
                 },
                 legend: {
                     data:['数量']
                 },
                 xAxis: {
                     data: []
                 },
                 yAxis: {},
                 series: [{
                     name: '数量',
                     type: 'bar',
                     data: []
                 }]
             });
             
             myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
             
             var names=[];    //类别数组(实际用来盛放X轴坐标值)
             var nums=[];    //销量数组(实际用来盛放Y坐标值)
             
             $.ajax({
             type : "get",
             async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
             url : "http://localhost:8080/wisdomeet/a/real/realProgress/realList",    //请求发送到TestServlet处
             success : function(result) {
                 //请求成功时执行该函数内容,result即为服务器返回的json对象
                 if (result) {
                     for(var i=0;i<result.length;i++){       
                           names.push(result[i].process.name);    //挨个取出类别并填入类别数组
                         }
                        for(var i=0;i<result.length;i++){       
                          //  nums.push(result[i].productionArrangement.number);    //挨个取出销量并填入销量数组daliy
                          nums.push(result[i].productionArrangement.daliy);
                          }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            xAxis: {
                                data: names
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '数量',
                                data: nums
                            }]
                        });
                        
                 }
            },
             error : function(errorMsg) {
                 //请求失败时执行该函数
             alert("图表请求数据失败!");
             myChart.hideLoading();
             }
        });
          };
          

后台接口示例:

@ResponseBody
    @RequestMapping(value="realList")
    public List<RealProgress>  realList(RealProgress realProgress, HttpServletRequest request, HttpServletResponse response, Model model) {
        List<RealProgress> realList = realProgressService.findList(realProgress);
        return realList;
    }

 

posted @ 2019-06-12 15:29  zty_2018  阅读(8782)  评论(0编辑  收藏  举报