后台数据要以json格式返回

页面:引用echarts.js , 然后data以ajax的数据请求并返回

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
title: {
text: ''
},
legend: {
data:["姓名"]
},
xAxis : [
{
type : "category",
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "<%=basePath%>getUserJson",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
console.log(result[i].userName);
arr.push(result[i].userName);
}
console.log("arr=>"+arr);
}

},
error : function(errorMsg) {
alert("获取图表请求数据失败!");
myChart.hideLoading();
}
})
return arr;
})()
}
],
yAxis : [
{
type : "value"
}
],
series : [
{
"name":"年龄",
"type":"bar",
"data":(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "<%=basePath%>getUserJson",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
console.log(result[i].age);
arr.push(result[i].age);
}
}
},
error : function(errorMsg) {
alert("获取图表请求数据失败!");
myChart.hideLoading();
}
})
return arr;
})()

}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

============================================================

Echarts 获取后台数据 使用后台数据展示 柱形图的更多相关文章

  1. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  2. 微信小程序结合后台数据管理实现商品数据的动态展示、维护

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...

  3. MVC后台获取数据和插入数据的三种方式【二】

    MVC模式下,从前端获取数据返回后台,总共有三种形式.下面的代码示例将演示如何将数据返回到后端. 一.首先我们看看表单代码,注意input标签中name的值. <html> <hea ...

  4. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

  5. 使用axios post 提交数据，后台获取不到提交的数据解决方案

    一.问题发现 前后端分离使用vue开发,结合axios进行前后端交互数据,一开始使用 get 请求,获取数据,没有发现任何问题,当使用 post请求 传参时,发现,数据明明已经提交,在打开F12 开发 ...

  6. 使用axios post 提交数据，后台获取不到

    https://www.cnblogs.com/yiyi17/p/9409249.html(copy https://www.cnblogs.com/loveyaxin/p/8385694.html( ...

  7. Echarts怎么用后台传来的json数据

    Echarts怎么用后台传来的json数据 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  8. ajax获取后台传递的json数据

      最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...

  9. 利用ajax的方式来提交数据到后台数据库及交互功能

    怎么样用ajax来提交数据到后台数据库,并完成交互呢????? 一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置:     $(function(){       var ...

  10. 用于后台管理的列表数据控件：DataGrid和Select

    常听人说不喜欢javascript.然而我一个一直用C#做后端的人,最喜欢的编程语言就是javascript了,我接收它的优点,也接收它的缺点! 前段时间接触过easyui,用过里面的DataGrid ...

随机推荐

  1. AC日记——国王游戏 洛谷 P1080

    国王游戏 思路: 贪心+高精: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 1005 struct Dat ...

  2. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  3. 【已解决】php本地环境超级慢

    打开 C:\Windows\System32\drivers\etc去掉 #127.0.0.1 localhost 前面的#保留 #::1 localhost 前面的#

  4. Codeforces 713A. Sonya and Queries

    题目链接:http://codeforces.com/problemset/problem/713/A 题意: Sonya 有一个可放置重复元素的集合 multiset, 初始状态为空, 现给予三种类 ...

  5. npp插件-NewFileBrowser:自定义模板

    ☞ 概述 NewFileBrowser用于定义文件的初始化文本.当我们创建一个jsp文件,或者spring bean的配置文件,或者maven的pom文件... 总有一些内容是固定的:把这些内容建立成 ...

  6. CSS中包含块原理解析

    CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...

  7. Oracle关于锁的几种类型和参数

    设立封锁机制主要是为了对并发操作进行控制,对干扰进行封锁,保证数据的一致性和准确性.Oracle数据库封锁方式有三种:共享封锁,独占封锁,共享更新封锁 封锁类型 Oracle RDBMS的封锁类型可分 ...

  8. <四边形不等式优化>[NOI1995]石子合并

    留个坑 挺套路的 明天来写个总结 #include<cstdio> #include<algorithm> inline int read() { int x = 0,f = ...

  9. python3-开发进阶补充Django中的文件的上传

    PS:这段时间有点不在状态,刚刚找回那个状态,那么我们继续曾经的梦想 今天我们来补充一下文件的上传的几种方式: 首先我们先补充的一个知识点: 一.请求头ContentType: ContentType ...

  10. leetcode 576. Out of Boundary Paths

    leetcode 576 题意大概就是在一个m*n的网格中,在坐标为[i,j]的网格上放一个物体,在规定时间N(t<=N)中,有多少种方法把物体移动出去.物体只能上下左右移动,一次移动一格,移动 ...