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

来源：互联网发布：samba python install 编辑：程序博客网时间：2024/06/07 15:57

前言

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

具体代码演示

页面代码展示

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><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<String> xAxisCategory;    //表中的数据    private List<Integer> datas;    public EchartsBean(){}    public EchartsBean(List<String> xAxisCategory,List<Integer> datas){        this.xAxisCategory=xAxisCategory;        this.datas=datas;    }    public List<String> getxAxisCategory() {        return xAxisCategory;    }    public void setxAxisCategory(List<String> xAxisCategory) {        this.xAxisCategory = xAxisCategory;    }    public List<Integer> getDatas() {        return datas;    }    public void setDatas(List<Integer> 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<String> xAxisCategory =Arrays.asList("高新区","蜀山区","瑶海区","包河区",        "经开区","政务区","滨湖新区","新站区");        List<Integer> datas = Arrays.asList(300,600,230,239,100,800,300,500);        echartsBean.setDatas(datas);        echartsBean.setxAxisCategory(xAxisCategory);        return echartsBean;     }}

具体页面效果如下

最终展示效果如下

总结

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

阅读全文

0 0