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

a518618718

已于 2023-06-01 21:04:40 修改

阅读量107

点赞数

分类专栏：别太放肆没什么用文章标签： java

于 2023-05-27 20:20:49 首次发布

本文链接：https://blog.csdn.net/a518618718/article/details/130905413

版权

别太放肆没什么用专栏收录该内容

14 篇文章 1 订阅

订阅专栏

该代码示例展示了如何使用ECharts库在网页上创建一个柱状图，动态从服务器获取合肥市各区人口数据。通过JavaScript初始化ECharts实例，设置图表选项，然后使用Ajax异步请求模拟从后台获取数据，最后更新图表内容并隐藏加载提示。

摘要由CSDN通过智能技术生成

<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>
@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 爱琴孩  
    *|||补胎https://iknow-pic.cdn.bcebos.com/f7246b600c3387442a766de4430fd9f9d62aa0f3|||
    * @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; 
    }
}