Java Echarts 实用小例子(Ajax异步加载)

蔚落 2022-01-27 09:45 412阅读 0赞

实际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<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; 
        }
    }

具体页面效果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]

最终展示效果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 1]  
上面只是简单模拟echarts从数据库动态获取数据。

原文：[https://blog.csdn.net/DreamWeaver\_zhou/article/details/80496455][https_blog.csdn.net_DreamWeaver_zhou_article_details_80496455]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]: /images/20220127/29e6c53eee384c9eb88d352cb1b098ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 1]: /images/20220127/d64abeaf9b9246e5877d6fe21e4b328d.png
[https_blog.csdn.net_DreamWeaver_zhou_article_details_80496455]: https://blog.csdn.net/DreamWeaver_zhou/article/details/80496455