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的绘图工具包,使用 ...
随机推荐
- [HTML 5] More about ARIA Relationships
- HDU 4893 线段树裸题
Wow! Such Sequence! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- Tokyo Tyrant（TTServer）系列（三）－Memcache协议
通过Memcache协议使用ttserver 通过telnet 127.0.0.1 9032 telnet连接到到启动的实例. 下面我们通过add添加key为key1和value为value1的数据 ...
- MapReduce编程之倒排索引
任务要求: //输入文件格式 18661629496 110 13107702446 110 1234567 120 2345678 120 987654 110 2897839274 1866162 ...
- Gretna2.0 使用过程中遇到的问题
在做Normalize的时候,报错"Cannot find T1 image (e.g. *.dcm in T1 Directory), Please Check again!", ...
- 分析性能瓶颈的视图：v$session_wait
这是一个寻找性能瓶颈的关键视图.它提供了任何情况下session在数据库中当前正在等待什么(如果session当前什么也没在做,则显示它最后的等待事件).当系统存在性能问题时,本视图可以做为一个起点指 ...
- Java-MyBatis-杂项：MyBatis根据数组、集合查询
ylbtech-Java-MyBatis-杂项:MyBatis根据数组.集合查询 1.返回顶部 1. foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的 ...
- idea设置Template
在eclipse里面经常会用到syso和main类似这样的内容,但是idea工具里面没有,可以通过 Editor ==> Live templates ==> 1.首先创建一个自己的Te ...
- 修改eclipse最近访问的工程的配置文件
此文件为:org.eclipse.ui.ide.prefs 配置项为:RECENT_WORKSPACES= 示例:RECENT_WORKSPACES=E\:\\Workspaces\\wokspace ...
- C# WebAPI小记
新建WebAPI项目 新建一个Model 安装Entity Framework 添加连接字符串 去Web.config 中 <configuration> 节点中最下面添加 在Word中编 ...