ECharts访问后台，JSON格式返回数据实例

最新推荐文章于 2023-06-11 00:20:17 发布

weixin_33743248

最新推荐文章于 2023-06-11 00:20:17 发布

阅读量2k

点赞数

文章标签： json javascript java ViewUI

完成图

一、页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/cac-all.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
    
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 600px;" ></div>
        
<script type="text/javascript">
    
   var myChart;
    // 绘制图表。
    $(document).ready(function(){
     // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('main'));
        
        // 使用刚指定的配置项和数据显示图表。
        option ={
                title : {
                    text: '双基识别查询结果',
                    subtext: '单位/天'
                },
                tooltip : {        //提示框设置
                    trigger: 'axis'    
                },        //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据
                color:['#87CEEB','#EE2C2C','#FF00FF','#EEEE00','#D1D1D1'],
                legend: {    //图例
                    data:['合法车辆','无牌车辆','无卡车辆','嫌疑车辆','其他车辆']
                },
                calculable : false,//设置图表为不可拖拽
                dataZoom: [{     //滚动条属性设置
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    left: '9%',
                    bottom: -5,
                    start: 0,    //滚动条显示数据窗口范围的起始 百分比  
                    end: 100 
                }],
                xAxis : [                        //  X轴
                    {
                        type : 'category',
                        
                        data : []    //在下面访问后台动态加载进来数据
                    }
                ],
                yAxis : [
                    {
                        type : 'value'        //横轴默认为类目型'category'，纵轴默认为数值型'value'
                    }
                ],
                series : [
                    {
                        name:'合法车辆',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#87CEEB','#87CEEB','#87CEEB','#87CEEB','#87CEEB',
                                       '#87CEEB','#87CEEB'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data:[],    
                    },
                    {
                        name:'无牌车辆',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#EE2C2C','#EE2C2C','#EE2C2C','#EE2C2C','#EE2C2C',
                                       '#EE2C2C','#EE2C2C'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data:[],
                    },
                    {
                        name:'无卡车辆',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#FF00FF','#FF00FF','#FF00FF','#FF00FF','#FF00FF',
                                       '#FF00FF','#FF00FF'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data:[],
                    },
                    {
                        name:'嫌疑车辆',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#EEEE00','#EEEE00','#EEEE00','#EEEE00','#EEEE00',
                                       '#EEEE00','#EEEE00'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data:[],
                    },
                    {
                        name:'其他车辆    ',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                      '#D1D1D1','#D1D1D1','#D1D1D1','#D1D1D1','#D1D1D1',
                                       '#D1D1D1','#D1D1D1'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data:[],
                    }
                ]
            };
        myChart.setOption(option);
        
        
        
       var rightfulVehicleCount=[];          //合法车辆数量 X轴
       var noPlateVehicleCount=[];        //无牌车辆
       var noCardVehicleCount=[];          //无卡车辆
       var suspectVehicleCount=[];        //嫌疑车辆
       var otherVehicleCount=[];        //其他车辆
       var cutTime=[];        //截断时间   
       var findTime ={};    //传入后台参数
           
           
       $.ajax({
           type: "post",
           url: "${pageContext.request.contextPath}/appDbssResult/test.do",
           data: findTime,
           dataType: "json",    //返回json格式
           success: function(findResult){
               if (findResult) {
                   for(var i=0;i<findResult.matchType5Count.length;i++){       
                      rightfulVehicleCount.push(findResult.matchType5Count[i]);    
                    }
                   for(var i=0;i<findResult.matchType6Count.length;i++){       
                      noPlateVehicleCount.push(findResult.matchType6Count[i]);    
                     }
                   for(var i=0;i<findResult.matchType7Count.length;i++){       
                      noCardVehicleCount.push(findResult.matchType7Count[i]);    
                     }
                   for(var i=0;i<findResult.matchType8Count.length;i++){       
                      suspectVehicleCount.push(findResult.matchType8Count[i]);    
                     }
                   for(var i=0;i<findResult.matchType9Count.length;i++){       
                      otherVehicleCount.push(findResult.matchType9Count[i]);    
                     }
                   for(var i=0;i<findResult.timeArray.length;i++){       
                       cutTime.push(findResult.timeArray[i]);    
                     }
                   
                  myChart.setOption({        //加载数据到图表中
                      xAxis : [                        //  X轴
                       {
                          data: cutTime    }
                       ],
                      series: [            // 根据名字对应到相应的系列
                       {     name: '合法车辆',
                           data: rightfulVehicleCount    }
                       ,
                       {  name: '无牌车辆',
                           data: noPlateVehicleCount    }
                       ,
                       {  name: '无卡车辆',
                           data: noCardVehicleCount    }
                        ,          
                       {  name: '嫌疑车辆',
                           data: suspectVehicleCount    }
                        ,          
                       {  name: '其他车辆',
                           data: otherVehicleCount }
                       ]
                   });
                  
                  
                }
           },
           error: function(){
           }
       })
        
    });
    
</script>
    
</body>

</html>

二、后台代码

@RequestMapping("test")
public ModelAndView test(String start,String end) {
    ModelAndView mv = new ModelAndView();
    mv.setView(Jackson2Util.jsonView());    //返回Json视图，不带变量名做为根节点
    AppDbssResult result = new AppDbssResult();
    String[] timeArray = new String[] {"2018-01-01","2018-01-02","2018-01-03","2018-01-04","2018-01-05","2018-01-06","2018-01-07"};
    result.setTimeArray(timeArray);
    
    Integer[] count5 = {0, 0, 0, 176, null, null, null};        //    车辆类型 5-9
    Integer[] count6 = {0, 154, 0, 0, null, null, null};
    Integer[] count7 = {179, 0, 0, 0, null, null, null};
    Integer[] count8 = {0, 0, 85, 0, null, null, null};
    Integer[] count9 = {0, 0, 0, 176, null, null, null};
    
    result.setMatchType5Count(count5);
    result.setMatchType6Count(count6);
    result.setMatchType7Count(count7);
    result.setMatchType8Count(count8);
    result.setMatchType9Count(count9);
    
    
    mv.addObject(result);    //返回Json视图，不带变量名做为根节点
    
    return mv;
}

public class Jackson2Util {
    public static MappingJackson2JsonView jsonView()
    {
        MappingJackson2JsonView mjjv=new MappingJackson2JsonView();
        mjjv.setExtractValueFromSingleKeyModel(true);
        return mjjv;
    }
}

weixin_33743248

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ECharts访问后台，JSON格式返回数据实例

完成图一、页面代码&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset=&quo
复制链接

扫一扫