ECharts访问后台，JSON格式返回数据实例
完成图
一、页面代码
<%@ 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: [],
left: '9%',
bottom: -,
start: , //滚动条显示数据窗口范围的起始 百分比
end:
}],
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=;i<findResult.matchType5Count.length;i++){
rightfulVehicleCount.push(findResult.matchType5Count[i]);
}
for(var i=;i<findResult.matchType6Count.length;i++){
noPlateVehicleCount.push(findResult.matchType6Count[i]);
}
for(var i=;i<findResult.matchType7Count.length;i++){
noCardVehicleCount.push(findResult.matchType7Count[i]);
}
for(var i=;i<findResult.matchType8Count.length;i++){
suspectVehicleCount.push(findResult.matchType8Count[i]);
}
for(var i=;i<findResult.matchType9Count.length;i++){
otherVehicleCount.push(findResult.matchType9Count[i]);
}
for(var i=;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 = {, , , , null, null, null}; // 车辆类型 5-9
Integer[] count6 = {, , , , null, null, null};
Integer[] count7 = {, , , , null, null, null};
Integer[] count8 = {, , , , null, null, null};
Integer[] count9 = {, , , , 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;
}
}
ECharts访问后台，JSON格式返回数据实例的更多相关文章
- 1.3WEB API 默认以json格式返回数据，同时定义时间格式，返回格式
首先我们知道,web api 是可以返回任意类型的,然后在输出的过程中转为(默认的)xml. 但是xml是比较费流量的,而且大多前端都是用json对接,所以我们也只能随大流,把它输出改成json. 不 ...
- MVC学习系列6--使用Ajax加载分部视图和Json格式的数据
Ajax的应用在平时的工作中,很是常见,这篇文章,完全是为了,巩固复习. 我们先看看不使用json格式返回分部视图: 先说需求吧: 我有两个实体,一个是出版商[Publisher],一个是书[Book ...
- SSH返回Json格式的数据
在开发中我们经常遇到客户端和后台数据的交互,使用比较多的就是json格式了.在这里以简单的Demo总结两种ssh返回Json格式的数据 项目目录如下 主要是看 上图选择的部分 WebRoot里面就 ...
- WebAPI搭建（二） 让WebAPI 返回JSON格式的数据
在RestFul风格盛行的年代,对接接口大多数人会选择使用JSON,XML和JSON的对比传送(http://blog.csdn.net/liaomin416100569/article/detail ...
- 3.自定义返回json格式的数据给前台（自定义Controller类中的Json方法）
在mvc的项目中,我们前台做一些操作时,后台要返回一些结果给前台,这个时候我们就需要有一个状态来标识到底是什么类型的错误, 例如: 执行删除的时候,如果操作成功(1行受影响),我们需要返回状态为1并输 ...
- javascript 解析ajax返回的xml和json格式的数据
写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...
- 在C#中通过使用Newtonsoft.Json库来解析百度地图地理编码（GeoCoder）服务接口返回的Json格式的数据
百度地图地理编码(GeoCoder)服务接口返回的Json格式的数据,如下所示: http://api.map.baidu.com/geocoding/v3/?address=**省**市**区**路 ...
- ASP.NET API(MVC) 对APP接口(Json格式)接收数据与返回数据的统一管理
话不多说,直接进入主题. 需求:基于Http请求接收Json格式数据,返回Json格式的数据. 整理:对接收的数据与返回数据进行统一的封装整理,方便处理接收与返回数据,并对数据进行验证,通过C#的特性 ...
- asp.net MVC控制器中返回JSON格式的数据时提示下载
Asp.net mvc在接收的是JSON格式的数据,但是奇怪的是在IE中提示下载文件,其他浏览器中一切正常,下载后,里面的内容就是在控制器中返回的数据.代码如下: 视图中js代码: $("# ...
随机推荐
- react native出现 undefined is not a function_this4.错误函数无法识别
该函数可能里可能有this,的上个函数this要绑定bind(this)
- JAVA的值传递问题
为什么 Java 中只有值传递? 首先回顾一下在程序设计语言中有关将参数传递给方法(或函数)的一些专业术语.按值调用(call by value)表示方法接收的是调用者提供的值,而按引用调用(call ...
- db2空值、null
1. 输入参数为字符类型,且允许为空的,可以使用COALESCE(inputParameter,'')把NULL转换成''; 2. 输入类型为整型,且允许为空的,可以使用COALESCE(inputP ...
- linux 生成密钥,并向git服务器导入公钥
1. server1 上使用haieradmin用户 ,先清理之前的ssh登录记录,rm –rf ~/.ssh , 运行ssh-keygen –t rsa(只需回车下一步即可,无需输入任何密 ...
- Openstack-Ceilometer-Alarm运行机制
1校验 对alarm列表进行定时监测,如果发现与设置的limit值不满足,则发出警报 监控服务分为三种:默认服务,单进程校验服务和分布式校验服务.根据配置来决定,默认配置:default Alarm状 ...
- DIV层的使用方法
1.可以判断你选择的样式是否存在用下边的方法(如果存在的话执行某个方法) if ($(this).hasClass('cur')) 2.这个方法可以查询一个页面中同样的div层总共有几个 var i= ...
- introduce myself
大家好啊,我是来自计算机一班的喻达龙,是2018届的萌新一个,很高兴与大家相约在这里.我想,大家都是怀抱相同的梦想带着一样的抱负走进涉外.我们从稚嫩蜕化为成熟,我相信我们在这里会从菜鸟变为大佬的,当然 ...
- Python文件学习
Python文件学习 文章 Python文件学习 open函数 基本的用法模式:file_object=open('',access_mode='r',buffering=-1) 其中access_m ...
- 配置jmeter环境变量及运行命令解释
Linux下Jmeter的安装及环境变量的配置 1.将Jmeter的安装包上传至Linux的/opt目录下,解压,如下图: 2.编辑/etc/profile文件配置Jmeter的环境变量 3.将编辑好 ...
- layer（jQuery弹出层插件）
弹窗alert:默认确定按钮+右上角关闭 top.layer.alert("请选择要删除的记录!",{shade: 0.3,offset:'250px'}); 弹窗alert:默认 ...