百度echatrs 异步加载数据

来源：互联网发布：c 网络编程基础编辑：程序博客网时间：2024/06/08 19:50

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <%      String path = request.getContextPath();      String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()              + path + "/";  %>   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <base href="<%=basePath%>">    <title>My JSP 'MyJsp.jsp' starting page</title>  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <script src="js/echarts.js"></script>  <script src="js/jquery-2.1.1.min.js"></script>  </head>   <body>      <div align="center">          <div id="main" style="width: 1000px;height:700px"></div>      </div>      <script type="text/javascript">          var myChart = echarts.init(document.getElementById('main')); //渲染组件          myChart.showLoading({ //加载动画              text : '正在加载数据。。。。'          });                var names = []; //类别数组（实际用来盛放X轴坐标值）          var nums = []; //销量数组（实际用来盛放Y坐标值）                //加载数据          jQuery.ajax({              url : "jdbcc",              type : 'get',              datatype : 'json',              async : true,              success : function(jsons) {                        if (jsons) {                      myChart.hideLoading(); //隐藏动画                      $.each(jsons, function(i, value) {                                //alert(jsons[index].price);                          names[i] = value['name'];                          nums[i] = value['age'];                                var option = {                                                      tooltip: {                               show: true                           },                           legend: {                               data: ['年龄']                           },                           xAxis: [                               {                                   type: 'category',                                   data: names                               }                           ],                           yAxis: [                               {                                   type: 'value'                               }                           ],                           series: [                               {                                   'name': '年龄',                                   'type': 'bar',                                   'data': nums                               }                           ]                           };                                myChart.setOption(option) //绑定数据                      });                  }                 },              error : function() {                  alert("数据加载失败！请检查数据链接是否正确");              }          });          // 初次加载图表(无数据)          myChart.setOption(option);      </script>  </body>  </html>

Controllor层处理：

    @RequestMapping(value = "/jdbcc", method = RequestMethod.GET)@ResponseBodypublic Object jdbcc() {List<User> list = userServiceImpl.jdbcc();return JSON.toJSON(list);}

阅读全文

0 0