完成图
一、页面代码
<%@ 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; } }