echarts 柱状图和饼状图动态获取后台数据
运用echarts来实现图表
1.首先下载echarts包 http://echarts.baidu.com/echarts2/doc/example.html，在这里我下载的是
2.将echarts包放到项目中，这是我在项目中的路径
3.柱状图的动态获取
首先 1）需要引入：
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="echarts/echarts.js"></script>
2）html，为柱状图设置容器
<body>
<div id="test" style="width:600px;height:400px;"></div>
</body>
3）js
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '<%=basePath %>echarts'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('test')); option = {
title : {
text: '农户地块面积统计' },
tooltip : {
trigger: 'axis'
},
legend: {
data:['承保人']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type: 'category',
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "gpadd.do?getNum",
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);
}
} },
error : function(errorMsg) {
alert("不好意思，图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})() ,
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
} }
],
yAxis : [ {
type: 'value',
name: '面积',
min: 0,
max: 1000000,
interval: 100,
axisLabel: {
formatter: '{value} m2'
},
splitNumber:10
}, ],
series : [
{
name:'承保人',
type:'bar',
data : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "gpadd.do?getNum",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
console.log(result[i].landScmj);
arr.push(result[i].landScmj);
}
} },
error : function(errorMsg) {
alert("不好意思,图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})() }, ]
};
// 为echarts对象加载数据
myChart.setOption(option); }
);
</script>
红色部分的为用ajax来获取动态数据
4）后台实现
@RequestMapping(params="getNum", produces = "application/json")
public void getNum(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/html; charset=utf-8");
List<LandUser> list=new ArrayList<LandUser>();
list=landUserBiz.findAll();
JSONArray jsonArray = JSONArray.fromObject( list );//转化成json对象
PrintWriter out=response.getWriter();
out.println(jsonArray);
out.flush();
out.close(); }
4.饼状图的实现
1）js
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '<%=basePath %>echarts'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/pie',// 使用柱状图就加载bar模块，按需加载
'echarts/chart/funnel'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('test')); option = {
title : {
text: '面积范围统计',
//subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['0-10000','10000-20000','20000-30000','30000-40000','40000以上']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data : (function(){
64 var arr=[];
65 $.ajax({
66 type : "post",
67 async : false, //同步执行
68 url : "gpadd.do?getCount",
69 data : {},
70 dataType : "json", //返回数据形式为json
71 success : function(result) {
72
73
74 if (result) {
75 for(var i=0;i<result.listCont.length;i++){
76
77 //alert(result.listCont[i]+" "+result.listName[i]);
78 arr.push({
79 name : result.listName[i],
80 value : result.listCont[i]
81 });
82
83 }
84 }
85
86 },
87 error : function(errorMsg) {
88 alert("不好意思,图表请求数据失败啦!");
89 myChart.hideLoading();
90 }
91 })
92 return arr;
93 })() }
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
2)后台
@RequestMapping(params="getCount", produces = "application/json")
public void getCount(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/html; charset=utf-8");
List<LandUser> list=new ArrayList<LandUser>();
List<Integer> listCont=new ArrayList<Integer>();
List<String> listName=new ArrayList<String>(); list=landUserBiz.findAll();
int count1=0,count2=0,count3=0,count4=0,count5=0; for(LandUser lu:list){ if(lu.getLandScmj()>0&&lu.getLandScmj()<10000)
count1++;
else if(lu.getLandScmj()>10000&&lu.getLandScmj()<20000)
count2++;
else if(lu.getLandScmj()>20000&&lu.getLandScmj()<30000)
count3++;
else if(lu.getLandScmj()>30000&&lu.getLandScmj()<40000)
count4++;
else
count5++;
} listCont.add(count1);
listCont.add(count2);
listCont.add(count3);
listCont.add(count4);
listCont.add(count5);
listName.add("0-10000");
listName.add("10000-20000");
listName.add("20000-30000");
listName.add("30000-40000");
listName.add("40000以上"); PrintWriter out=response.getWriter();
JSONObject jsonData=new JSONObject();
jsonData.put("listCont",listCont);
jsonData.put("listName",listName);
out.println(jsonData);
out.flush();
out.close();
}
成果显示
柱状图：
饼状图：
echarts 柱状图和饼状图动态获取后台数据的更多相关文章
- FusionChart实现柱状图、饼状图的动态数据显示 附Demo
最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...
- FusionChart实现柱状图、饼状图的动态数据显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...
- 使用FusionCharts出柱状图和饼状图
在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了Fusion ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- Java创建柱状图及饼状图
Java创建图表其实还是很方便的,但是要引入相关的jar包.如下 jfreechart.jar jcommon,jar gnujaxp.jar 其中最主要的是jfreechart.jar. 下面就让我 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- 【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题
前言 众所周知,通过数据绘图,我们可以将枯燥的数字转换成容易被人们接受的图表,从而让人留下更加深刻的印象.而大多数编程语言都有自己的绘图工具,matplotlib就是基于Python的绘图工具包,使用 ...
随机推荐
- B - Networking
B - Networking 思路:并查集板子. #include<cstdio> #include<cstring> #include<iostream> #in ...
- Oracle里schema理解
在Oracle中,一个用户就是一个Schema,表都是建立在Schema中的,也可以理解为每个用户拥有不同的表.一个用户想访问另外一个用户,也就是另外一个schema的表的时候,可以用 usernam ...
- Linux用户管理案例(第二版)
批量添加用户 1.按照/etc/passwd文件格式编写用户信息文件users.info xiaofang01::1001:503::/home/xiaofang01:/bin/bash #注意不能 ...
- 赵雅智_android获取本机运营商，手机号部分能获取
手机号码不是全部的都能获取.仅仅是有一部分能够拿到. 这个是因为移动运营商没有把手机号码的数据写入到sim卡中.SIM卡仅仅有唯一的编号.供网络与设备 识别那就是IMSI号码,手机的信号也能够说是通过 ...
- BZOJ 2124: 等差子序列 线段树维护hash
2124: 等差子序列 Description 给一个1到N的排列{Ai},询问是否存在1<=p1=3),使得Ap1,Ap2,Ap3,…ApLen是一个等差序列. Input 输入的第一行包含一 ...
- lightoj--1410--Consistent Verdicts(技巧)
Consistent Verdicts Time Limit: 5000MS Memory Limit: 32768KB 64bit IO Format: %lld & %llu Su ...
- DB-MySql：MySQL 及 SQL 注入
ylbtech-DB-MySQL:MySQL 及 SQL 注入 1.返回顶部 1. MySQL 及 SQL 注入 如果您通过网页获取用户输入的数据并将其插入一个MySQL数据库,那么就有可能发生SQL ...
- 25.QT进度条
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> 5 #include <QProgressBar&g ...
- php基础知识（一）--2017-04-14
1.Php的两种打开方式: 第一种方式:地址栏打开:http://localhost/0414/qq.php 地址栏输入localhost/ 就是phpstudy下的www文件夹 第二种:新 ...
- Spark的数据存储（十九）
Spark本身是基于内存计算的架构,数据的存储也主要分为内存和磁盘两个路径.Spark本身则根据存储位置.是否可序列化和副本数目这几个要素将数据存储分为多种存储级别.此外还可选择使用Tachyon来管 ...