Echars+Ajax+SpringMVC获取动态数据

来源：互联网发布：三菱q系列plc编程电缆编辑：程序博客网时间：2024/04/28 13:10

Echars使用步骤：

第一步、引入Echars-all.js

 <script src="${pageContext.request.contextPath }/js/echarts-all.js"></script>    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>

第二步获取Echars容器对象并Ajax获取数据、

   <div id="main" style="width: 1300px;height:700px;"></div>//给Echars一个容器

/**Ajax获取数据*/

   var myChart = echarts.init(document.getElementById('main'));

 $.ajax({         type : "post",         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）         url : "${pageContext.request.contextPath }/show/lcd.do?method=searchCityDoThingNumber",    //请求发送到相应url处         data : {flag:flag},         dataType : "json",        //返回数据形式为json         success : function(result) {                               //请求成功时执行该函数内容，result即为服务器返回的json对象               if (result) {                    for(var i=0;i<result.length;i++){                              names.push(result[i].deptname);    //挨个取出类别并填入类别数组                     }                    for(var i=0;i<result.length;i++){                               nums.push(result[i].casenum);    //挨个取出数量并填入数量数组                      }                                                       myChart.hideLoading();    //隐藏加载动画                    myChart.setOption({        //加载数据图表                    title: {                        x: 'center',                        text: ''                                     },                                        tooltip : {                            trigger: 'axis'                        },                         // legend: {                        // x: 'right',                         //   data:['办件量' /* ,'降水量' */ ]                       // },                        /*  toolbox: {//工具栏                            show : true,                            feature : {                               // mark : {show: true},                                dataView : {show: true, readOnly: false},                                magicType : {show: true, type: ['line', 'bar']},                                restore : {show: true},                                myTool : { //自定义Echars 工具栏工具事件                                     show : true,                                      title : '上一周数据',                                      icon : 'image://http://echarts.baidu.com/images/favicon.png',                                      onclick : function (){                                      rediret(); //点击事件                                    }                                   },                                  saveAsImage : {show: true}                            }                        }, */                        calculable : true,                        xAxis : [                            {                                type : 'category',                                show: false,                                data :names,                                axisLabel:{                                      interval:0,//横轴信息全部显示                                      rotate:-30,//-30度角倾斜显示                                 }                             }                        ],                                                grid: { // 控制图的大小，调整下面这些值就可以，                                    /*  x: 40,                                     x2: 100, */                                     x:'10%',                                     x2: '10%',                                     y2:'20%'// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上                            },                        yAxis : [                        /*     {                                type : 'value',                                splitArea : {show : true}                            } */                        ],                         series : [                            {                                name:'办件量',                                type:'bar',                                                                itemStyle: {                                    normal: {                                        color: function(params) {                                            // build a color map as your need.                                            var colorList = [                                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',                                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',                                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',                                               '#CDB79E','#ADFF2F','#B4EEB4','#90EE90','#4EEE94'                                            ];                                            return colorList[params.dataIndex]                                        },                                        label: {                                            show: true,                                            position: 'top',                                            formatter: '{b}\n{c}'                                        }                                    }                                },                                                                                                                                                                data:nums                            }/* ,                            {                                name:'降水量',                                type:'bar',                                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]                            } */                        ]                    });                                 }                   },         error : function(errorMsg) {             //请求失败时执行该函数         //alert("图表请求数据失败!");         myChart.hideLoading();         }    })
第三步、SpringMVC接受数据,并返回数据
@RequestMapping(params = "method=searchCityDoThingNumber")public void searchCityDoThingNumber(String flag,Model model,HttpServletResponse response,HttpServletRequest request){String logo  =request.getParameter("flag");List<CityDoThingNumber> departmentList=cityDoThingNumberService.getCityDoThingNumber(logo);//获取所有区域ObjectMapper mapper = new ObjectMapper();//一个工具类可以转将List<Object>转成json  String json;try {json = mapper.writeValueAsString(departmentList);//可以转将List<Object>转成jsonresponse.getWriter().write(json);System.out.println(json);} catch (Exception e) {e.printStackTrace();}}

阅读全文

1 0