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代码: $("# ...
随机推荐
- OGG学习笔记05-OGG的版本
刚接触OGG的时候,很容易被众多的版本搞晕,虽然官方有提供各版本对应认证OS和DB的表格. 个人认为一个比较简单的方式,是直接去edelivery.oracle.com下载OGG,选定一个大版本后,这 ...
- 服务注册发现Eureka
一 Eureka相关概念 1 Peer 2 Zone 3 Region 地理区域 3 CAP理论 4 在线扩容 5 二 注册发现 Eureka 1 搭建Server服务端 ...
- C#中的装箱(inboxing)和拆箱(unboxing)（简单理解）
装箱和拆箱是值类型和引用类型之间相互转换是要执行的操作. 装箱:将一个值类型隐式地转换成一个object类型,或把这个值类型转换成一个被该值类型应用的接口类型,把一个值类型的值装箱,就是创建一个ob ...
- HTML常用标签定义，用法及例子
1.HTML注释 <!--...--> 定义:使用注释可对代码进行解释,不会显示在浏览器中. <!--这是一段呢注释.注释不会在浏览器中显示.--> <p>段落标签 ...
- JVM内存结构分析
对于Java程序员来说,内存是由JVM自动管理的,所以一旦出现内存泄漏或溢出的问题,不了解JVM的内存结构和各个内存区域的工作职责,将对解决问题带来很大的麻烦,本文参照周志明的<深入理解Java ...
- Shiro权限管理框架
一.Shiro介绍 Apache Shiro 是Java 的一个安全框架.Shiro 可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE 环境,也可以用在JavaEE 环境.Shiro 可以 ...
- Python RabbitMQ消息队列
python内的队列queue 线程 queue:不同线程交互,不能夸进程 进程 queue:只能用于父进程与子进程,或者同一父进程下的多个子进程,进行交互 注:不同的两个独立进程是不能交互的. ...
- 在Linux下OpenCV的下载和编译
原理上来说,和windows下没有差别,我们同样使用Cmake-GUI来解决问题. 我们推荐QT和OpenCV全部采用官方的方式重新安装一遍,否则可能会丢失一些模块,而这些都会降低开发效率. 1.参考 ...
- 剑指offer（51）构建乘积数组
题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...
- Java基础学习-HelloWorld案例的编写和运行
一.HelloWorld案例的流程: 第一步:编写一个.java的源文件.通过Windows自带的记事本文件就可以完成. 第二步:将.java的源文件通过编译器编译生成 ...