echarts模拟从数据库异步加载数据

前言

前面的几篇小例子中,echarts数据都是写死在js中的,但是在实际echarts中,数据都是从数据库中动态获取过来。所以这里来简单演示一下echarts怎么通过ajax异步获取数据库中的数据在页面上进行动态展示。下面只是功能代码展示,具体的js包导入,以及springmvc等等这里不详细介绍!

具体代码演示

  • 页面代码展示
<body>

<div id="main" style="width: 600px;height:400px;">div>

 <script type="text/javascript">
         // 基于准备好的dom,初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));

         myChart.setOption({
             title: {
                  text: '合肥市各区人口数统计',
                  left:'left'
              },
              legend:{
                 data:['人口数']
              },
              xAxis:{
                 data:[]
              },
              yAxis:{},
             series : [{
                name:'人口数',
                type:'bar',
                data:[]
             }
             ]
         });

         myChart.showLoading({text: '数据正在加载中...'  }); 
         //这里设置定时器模拟数据延时加载
         setTimeout(function(){
            $.ajax({  
                url:"<%=basePath%>echartsAsynController/getDatas",  
                dataType:"json",  
                success:function(jsonData){   
                    myChart.setOption({  
                       xAxis: {  
                           data: jsonData.xAxisCategory  
                       },  
                       series: [{  
                           // 根据名字对应到相应的系列  
                           name: '人口数',  
                           data: jsonData.datas  
                       }]  
                   });  
                   // 设置加载等待隐藏  
                   myChart.hideLoading();  
                }  
            }); 
        },2000);
 script>
body>

上面页面上,我们先初始化echarts图标配置。然后将需要动态获取的xAxis上的数据和series上的数据先置空。后面在用ajax异步获取数据,然后再添加到echarts配置上去。上面简单利用js的延迟执行来模拟大量数据加载的空白,如果数据加载很慢留下空的图标在页面上,会造成很不好的用户体验。所以这里使用showLoading来显示一个数据加载中。

  • 下面是echarts图标的数据包装类
/**
 - @ClassName: EchartsBean
 - @Description: TODO(图标数据包装类)
 - @author 爱琴孩
*/
public class EchartsBean {

    //表中的x轴类别
    private List xAxisCategory;
    //表中的数据
    private List datas;

    public EchartsBean(){}

    public EchartsBean(List xAxisCategory,List datas){
        this.xAxisCategory=xAxisCategory;
        this.datas=datas;
    }

    public List getxAxisCategory() {
        return xAxisCategory;
    }

    public void setxAxisCategory(List xAxisCategory) {
        this.xAxisCategory = xAxisCategory;
    }

    public List getDatas() {
        return datas;
    }

    public void setDatas(List datas) {
        this.datas = datas;
    }
}
  • 下面是具体的逻辑控制层代码
@Controller
@RequestMapping("/echartsAsynController")
public class EchartsAsynController {
    /** 
    * @Description: TODO(跳转页面) 
    * @return
    * @author 爱琴孩  
    * @version V1.0
     */
    @RequestMapping("/showTable")
    public String showTable(){
        System.out.println("跳转到对应的页面");
        return "/core/echarts/asynData";
    }

    /**
    * 
    * @Description: TODO(模拟从数据库获取数据) 
    * @return
    * @author 爱琴孩  
    * @version V1.0
    */
    @ResponseBody
    @RequestMapping("/getDatas")
    public EchartsBean getDatas(){
        EchartsBean echartsBean =new EchartsBean();
        List xAxisCategory =Arrays.asList("高新区","蜀山区","瑶海区","包河区",
        "经开区","政务区","滨湖新区","新站区");
        List datas = Arrays.asList(300,600,230,239,100,800,300,500);
        echartsBean.setDatas(datas);
        echartsBean.setxAxisCategory(xAxisCategory);
        return echartsBean; 
    }
}
  • 具体页面效果如下
    echarts模拟从数据库异步加载数据_第1张图片
    最终展示效果如下
    echarts模拟从数据库异步加载数据_第2张图片

总结

上面只是简单模拟echarts从数据库动态获取数据。后面会和大家继续深入echarts的小细节!

你可能感兴趣的:(echarts)