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代码: $("# ...
随机推荐
- python进阶(四) windows下虚拟环境使用
虚拟环境作用: 1. 通常开发一个项目,会安装很多的第三方包,这时第三方包我们是安装在本机环境的.那么如果项目进行部署或移植的时候是不是要重新安装这些包???? 2.开发环境,同时在做两相项目,同时要 ...
- shell 三剑客
grep 过滤来自一个文件或标准输入匹配模式内容. 除了grep外,还有egrep.fgrep.egrep是grep的扩展,相当于grep -E.fgrep相当于grep -f,用的少. Usage: ...
- Django之CBV源码解析
l链接跳转:https://www.cnblogs.com/hnlmy/p/9662798.html 以及https://www.cnblogs.com/hnlmy/p/10603999.html
- BIOS备忘录之ASL code常用知识点
_HID:device唯一 _STA:决定device在不在(在DM下面能不能看到) _CRS:描述分配给device的资源 _INI:在OSPM加载描述表的时候运行一次(比如,如果要根据不同情况给d ...
- Docker 介绍及安装
Docker介绍 Docker采用 C/S架构 Docker daemon 作为服务端接受来自客户的请求,并处理这些请求(创建.运行.分发容器). Docker基于go语言并遵从Apache2.0协议 ...
- 【题解】JSOIWC2019 Round4
题面: https://files-cdn.cnblogs.com/files/yzhang-rp-inf/P13.gif https://files-cdn.cnblogs.com/files/yz ...
- 【题解】Luogu P3931 SAC E#1 - 一道难题 Tree
原题传送门 题目几乎告诉你要用最大流 先进行搜索,将树的叶子节点都连到一个虚拟点T上,流量为inf(这样不会干扰到前面部分的最大流) 其他边按树的形态连边,以根节点为S,跑一变最大流即可求出答案 #i ...
- PHP快速排序（递归）
日常的排序算法中,快速排序是其中一种.实现起来相对简单. 假设有一个数组,有若干(N)个元素(数字且无序),需要对其进行从小到大的排序. 快速排序的思路是怎么样的呢? 取一个中间值,然后,用其他数组元 ...
- iOS开发 -------- storyBoard实现控制器添加childViewController
1 拖进去scrollView 添加约束(0,0,0,0); 2 更新scrollView约束,然后在scrollView上面加个view,设置其约束为(0,0,0,0) 和 水平滑动约束; ...
- 线性回归（linear regression）
基本形式 最小二乘法估计拟合参数 最小二乘法:基于均方误差最小化来进行模型求解的方法称为“最小二乘法”(least square method) 即(左边代表 $\mathbf{\omega }$ 和 ...