基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制（上篇）
页面部分
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts柱状图</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
$().ready(function() {
var myChart = echarts.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading();
//定义图表options
var options = {
color : [ '#3398DB' ],
title : {
text : "通过Ajax获取数据呈现图标示例",
subtext : "www.stepday.com",
sublink : "http://www.stepday.com/myblog/?Echarts"
},
tooltip : {
trigger : 'axis'
},
legend : {
data : []
},
toolbox : {
show : true,
feature : {
mark : false
}
},
calculable : true,
xAxis : [ {
type : 'category',
data : []
} ],
yAxis : [ {
type : 'value',
splitArea : {
show : true
}
} ],
series : [ {
barWidth : '60%'
} ]
}; //通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "showEchartBar.action",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.xAxis[0].data = result.category;
options.series = result.series;
options.legend.data = result.legend; myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
}
}); });
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echarts饼状图</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main"
style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div> <script type="text/javascript">
$().ready(function() {
var myChart = echarts.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading();
//定义图表options
var options = {
title : {
text : '某站点用户访问来源',
subtext : '纯属虚构',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
left : 'left',
data : []
},
series : [ {
name : '访问来源',
type : 'pie',
data : []
} ]
};
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "showEchartPie.action",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
options.legend.data = result.legend; //将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.series[0].name = result.series[0].name;
options.series[0].type = result.series[0].type;
var serisdata = result.series[0].data; //遍历
/* var datas = [];
for ( var i = 0; i < serisdata.length; i++) {
datas.push({
name : serisdata[i].name,
value : serisdata[i].value
});
}
options.series[0].data = datas; */ //jquery遍历
var value = [];
$.each(serisdata, function(i, p) {
value[i] = {
'name' : p['name'],
'value' : p['value']
};
});
options.series[0]['data'] = value; myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
}
}); });
</script> </body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<title>echarts折线图</title>
<body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main"
style="height: 400px; border: 1px solid #ccc; padding: 10px;"></div> <script type="text/javascript">
$().ready(
function() {
var myChart = echarts.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading();
//定义图表options
var options = {
title: {
text: "通过Ajax获取数据呈现图标示例",
subtext: "www.stepday.com",
sublink: "http://www.stepday.com/myblog/?Echarts"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
toolbox: {
show: true,
feature: {
mark: false
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: []
}; //通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "showEchartLine.action",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.xAxis[0].data = result.category;
options.series = result.series;
options.legend.data = result.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
}
}); });
</script>
</body>
</html>
后端java代码
@Controller
@RequestMapping("/echartsJSP")
public class EchartAction { @Autowired
private TotalNumBiz toatlNumBiz;
@Autowired
private VisitBiz visitBiz; @RequestMapping("/showEchartLine")
@ResponseBody
public EchartData lineData() {
System.out.println("折线图");
List<String> category = new ArrayList<String>();
List<Long> serisData=new ArrayList<Long>();
List<TotalNum> list = toatlNumBiz.findAll();
for (TotalNum totalNum : list) {
category.add(totalNum.getWeek());
serisData.add(totalNum.getCount());
}
List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "总数比较" }));// 数据分组
List<Series> series = new ArrayList<Series>();// 纵坐标
series.add(new Series("总数比较", "line", serisData));
EchartData data = new EchartData(legend, category, series);
return data;
}
@RequestMapping("/showEchartBar")
@ResponseBody
public EchartData BarData() {
System.out.println("柱状图");
List<String> category = new ArrayList<String>();
List<Long> serisData=new ArrayList<Long>();
List<TotalNum> list = toatlNumBiz.findAll();
for (TotalNum totalNum : list) {
category.add(totalNum.getWeek());
serisData.add(totalNum.getCount());
}
List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "总数比较" }));// 数据分组
List<Series> series = new ArrayList<Series>();// 纵坐标
series.add(new Series("总数比较", "bar", serisData));
EchartData data = new EchartData(legend, category, series);
return data;
}
/**
* 饼状图
* @param <T>
* @return
*/
@RequestMapping("/showEchartPie")
@ResponseBody
public EchartData PieData() {
List<String> legend = new ArrayList<String>();
List<Map> serisData=new ArrayList<Map>(); List<Visit> list = visitBiz.findAll();
for (Visit visit : list) {
Map map =new HashMap();
legend.add(visit.getName());
map.put("value", visit.getValue());
map.put("name",visit.getName());
serisData.add(map);
}
List<Series> series = new ArrayList<Series>();// 纵坐标
series.add(new Series("总数比较", "pie",serisData));
EchartData data = new EchartData(legend,null, series);
return data;
}
}
另外使用EchartsData和Series两个类封装数据
public class EchartData {
public List<String> legend = new ArrayList<String>();// 数据分组
public List<String> category = new ArrayList<String>();// 横坐标
public List<Series> series = new ArrayList<Series>();// 纵坐标
public EchartData(List<String> legendList, List<String> categoryList,
List<Series> seriesList) {
super();
this.legend = legendList;
this.category = categoryList;
this.series = seriesList;
}
}
public class Series<T>{
public String name;
public String type;
public List<T> data;// 这里要用int 不能用String 不然前台显示不正常（特别是在做数学运算的时候）
public Series(String name, String type, List<T> data) {
super();
this.name = name;
this.type = type;
this.data = data;
}
测试使用的实体类及其他部分
public class TotalNum {
private Integer id;
private String week;
private Long count;
public class Visit {
private Integer id;
private String name;
private Integer value;
基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制（上篇）的更多相关文章
- 基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制（下篇）
<script type="text/javascript"> $().ready(function() { var myChart = echarts.init(do ...
- Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- java 柱状图、折线图、饼状图
1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...
- Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图
JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...
- ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- Android之自定义控件实现天气温度折线图和饼状图
以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * ...
- DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- 【PHP】基于ThinkPHP框架搭建OAuth2.0服务
[PHP]基于ThinkPHP框架搭建OAuth2.0服务 http://leyteris.iteye.com/blog/1483403
随机推荐
- 2019年最新 Python 模拟登录知乎 支持验证码
知乎的登录页面已经改版多次,加强了身份验证,网络上大部分模拟登录均已失效,所以我重写了一份完整的,并实现了提交验证码 (包括中文验证码),本文我对分析过程和代码进行步骤分解,完整的代码请见末尾 Git ...
- django 常见过滤器
一.形式:小写 {{ name | lower }} 二.过滤器是可以嵌套的,字符串经过三个过滤器,第一个过滤器转换为小写,第二个过滤器输出首字母,第三个过滤器将首字母转换成大写 标签 {{ st ...
- 九度oj 题目1352：和为S的两个数字
题目描述: 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输入: 每个测试案例包括两行: 第一行包含一个整数n和k, ...
- [BZOJ2118] 墨墨的等式（最短路）
传送门 好神啊.. 需要用非负数个a1,a2,a3...an来凑出B 可以知道,如果一个数x能被凑出来,那么x+a1,x+a2.......x+an也都能被凑出来 那么我们只需要选择a1~an中任意一 ...
- POJ2096 Collecting Bugs(概率DP,求期望)
Collecting Bugs Ivan is fond of collecting. Unlike other people who collect post stamps, coins or ot ...
- cf287E Main Sequence
As you know, Vova has recently become a new shaman in the city of Ultima Thule. So, he has received ...
- linux虚拟机无法上网 Network is unreachable
系统centos 安装ftp时报错 Couldn't resolve host 'mirrorlist.centos.org [root@wulihua bin]# yum install vsft ...
- EC++学习笔记(五) 实现
条款26:尽可能延后变量定义式的出现时间 尽可能延后变量的定义,知道非得使用该变量的前一刻为止方法A: Widget W; ; i < n; ++i) { W = ... } 方法B: ; i ...
- vs2005做的留言本——天轰川下载
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] 这个虽然单纯是个留言本,但是在功能上我都使用了尽量不重复的解决方法,所以我自认为非常适合入门级的朋友看,而且用了我 ...
- ActivityGroup中监听返回按键
如果你想使用ActivityGroup来统一管理Activity的话,当然首先这是一种很好的方法,但是如果你想在ActivityGroup里面拦截返回按键来进行统一管理的话,直接覆写onKeyDown ...