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代码: $("# ...
随机推荐
- 在 CentOS7 上安装 Zookeeper服务
1.创建 /usr/local/services/zookeeper 文件夹: mkdir -p /usr/local/services/zookeeper 2.进入到 /usr/local/serv ...
- 4、Kafka命令行操作
Kafka命令行操作 1)查看当前服务器中的所有topic [test@ip101 kafka]$ bin/kafka-topics.sh --zookeeper ip101:2181 --list ...
- 谷歌技术"三宝"之BigTable
转自:https://blog.csdn.net/OpenNaive/article/details/7532589 2006年的OSDI有两篇google的论文,分别是BigTable和Chubby ...
- kvm日常维护
1.列出物理机器上安装的虚拟[root@localhost ~]# virsh list --all Id Name State------------------------------------ ...
- Guitar Pro 添加装饰音
在使用Guitar Pro进行乐谱弹唱或者自己作曲时,我们经常会碰到在乐谱上出现一些装饰音,那么大家肯定会有问题了,装饰音是什么?如何使用Guitar Pro来添加装饰音呢? 装饰音是用来装饰旋律的临 ...
- Delphi10.2 Tokyo试用（1）
最近下载了Delphi10.2 Tokyo,试用了一下,感觉不错,尤其是针对Linux的开发,总算出来了,可以考虑把原来服务器重新编译成RedHat上使用了,免得客户一天到晚喊Windows不安全,要 ...
- Ubuntu 18.04拨号上网及校园网开启IPV6
Ubuntu 18.04下有两种方法实现拨号上网,第一种是通过图形界面添加,需要开启自动连接,并且要关闭以太网的自动连接.(不推荐这种连接方式)这里介绍第二种,通过pppoeconf命令进行拨号. 关 ...
- Arch Linux安装后的一些初始设置简介
配置有线网络. 没网络的时候,可以直接设定ip应急,后面 netctl 才是正规设置: # ip addr add 192.168.0.100/24 dev enp0s4# ip link set d ...
- T-net 【贪心】
问题 H: T-net 时间限制: 1 Sec 内存限制: 128 MB 提交: 302 解决: 14 [提交] [状态] [命题人:admin] 题目描述 T-net which is a ne ...
- Windows Update Medic Service 拒绝访问
修改注册表:HEKY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WaaSMedicSvc 中Start的值改为4.