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的绘图工具包,使用 ...
随机推荐
- 工具-vscode使用
1.智能感知 vscode使用DefinitelyTyped进行自动完成所以需要先安装tsd,命令: npm install -g tsd 安装完成后,首先安装node基本语法支持 tsd query ...
- intel dpdk在ubuntu12.04中測试testpmd、helloworld程序
一.測试环境 操作系统:ubuntu12.04 x86_64 dpdk版本号:1.6.0r2 虚拟机:vmware 10 网卡: Intel Corporation 82545EM Gigabit ...
- js保留两位小数的解决的方法
var a = 123.456; a = a..toFixed(2); alert(a);//结果:123.46
- Vmware VM共享
打开虚拟机,设置,选项点击共享文件夹 点击启用,将电脑windows的目录添加过来 进入终端即可以进入
- python程序执行原理
Python程序的执行原理 1. 过程概述 Python先把代码(.py文件)编译成字节码,交给字节码虚拟机,然后解释器一条一条执行字节码指令,从而完成程序的执行. 1.1python先把代码(.py ...
- c#常量如何使用
c#中类中定义一个常量,在其他地方使用的时候使用类名.常量
- Selenium启动不同浏览器
1.启动Chrome "webdriver.chrome.driver" System.setProperty("webdriver.chrome.driver" ...
- JQuery （总结）
延迟触发事件 Ajax异步请求数据 Jquery事件: Focus获得焦点 blur失去焦点 Change内容在变化的时候 Click点击事件 ---------------------------- ...
- DOM相关知识点
内容待补充... DOM相关注意题目: DOM的最小组成单位叫做 //节点 Node DOM 有自己的国际标准,目前的通用版本是 //DOM 3 DOM 树的根节点 //HTML 元素 Element ...
- 博客移至 GitHub
新博客地址: github.com/FatliTalk/blog