echarts异步加载获取数据

时间:2019-06-12
本文章向大家介绍echarts异步加载获取数据,主要包括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;
    }

原文地址:https://www.cnblogs.com/ztyc/p/11009956.html