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代码: $("# ...
随机推荐
- hive 调优手段
调优手段 ()利用列裁剪 当待查询的表字段较多时,选取需要使用的字段进行查询,避免直接select *出大表的所有字段,以免当使用Beeline查询时控制台输出缓冲区被大数据量撑爆. ()JOIN避免 ...
- 用命令行打开sublime
在linux下装了linux后默认并不能通过运行命令的方式打开,这就让我们不能像vim一样可以通过 vim <fileName> 来打开文件. 不过我们可以通过把sublime的执行文件放 ...
- sublime设置tab为四个空格
在首选项->设置里: 添加: "tab_size": 4, "translate_tabs_to_spaces": true,
- acm 2015北京网络赛 F Couple Trees 主席树+树链剖分
提交 题意:给了两棵树,他们的跟都是1,然后询问,u,v 表 示在第一棵树上在u点往根节点走 , 第二棵树在v点往根节点走,然后求他们能到达的最早的那个共同的点 解: 我们将第一棵树进行书链剖,然后第 ...
- Python 进程之间共享数据
最近遇到多进程共享数据的问题,到网上查了有几篇博客写的蛮好的,记录下来方便以后查看. 一.Python multiprocessing 跨进程对象共享 在mp库当中,跨进程对象共享有三种方式,第一种 ...
- 星型数据仓库olap工具kylin介绍和简单使用示例
本文转载自:https://www.cnblogs.com/hsydj/p/4515057.html 星型数据仓库olap工具kylin介绍 星型数据仓库olap工具kylin介绍 数据仓库是目前企业 ...
- systemd 服务介绍
CentOS7自定义系统服务 CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存在系统 ...
- Docker Swarm 创建服务
Docker Swarm 创建服务 环境: 系统:Centos 7.4 x64 应用版本:Docker 18.09.0 管理节点:192.168.1.79 工作节点:192.168.1.78 工作节点 ...
- Shell 终端ANSI控制码
Shell 系统交互参数整理 输出颜色 格式: \033[字背景颜色;字体颜色m字符串\033[0m 背景颜色 字体颜色 40: 黑 30: 黑 41: 红 31: 红 42: 绿 32: 绿 43: ...
- JavaScript形而上的单例模式
什么是单例模式? 单例模式是指,类多次实例化返回的对象是同一个. 反例 var tt = function(name){ this.name = name; }; var t1 = new tt('t ...