现在位置首页 / 项目实战 /正文

echarts+java封装类实现图表的demo

作者: IT小兵 | 2016年5月18日| 热度:℃ | 评论: |参与:

在[echarts .NET开源类库说明]一文中,介绍了一个基于.net封装的echarts类,今天分享一下:echarts+java封装类实现图表的demo。

1、echarts封装类:

package com.ffcs.wlan.model;
import java.util.ArrayList;
import java.util.List;
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;
	}
}
package com.ffcs.wlan.model;
import java.util.List;
public class Series  {
	public String name;
	public String type;
	public List<Integer> data;//这里要用int 不能用String 不然前台显示不正常(特别是在做数学运算的时候)
	public Series( String name, String type, List<Integer> data) {
		super();
		this.name = name;
		this.type = type;
		this.data = data;
	}
}

上面是Series 类。

2、控制器实现

package com.ffcs.wlan.controller;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ffcs.wlan.model.EchartData;
import com.ffcs.wlan.model.Series;
@Controller
@RequestMapping("/echarts")
public class EntityController {
	private static final Logger logger = LoggerFactory.getLogger(EntityController.class);
	@RequestMapping("/line_data")
	@ResponseBody
	public EchartData lineData() {
		logger.info("lineData....");
		List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高气温"}));//数据分组
		List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标
		List<Series> series = new ArrayList<Series>();//纵坐标
		series.add(new Series("最高气温", "line", 
						new ArrayList<Integer>(Arrays.asList(
								21,23,28,26,21,33,44))));
		EchartData data=new EchartData(legend, category, series);
		return data;
	}
	@RequestMapping("/line_page")
	public String linePage() {
		logger.info("linePage....");
		return "report/line";
	}
}

3、jsp页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>line</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts2.0/esl.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
		<div id="main" style="height:400px"></div>
	<script type="text/javascript" language="javascript">
		var myChart;
		var eCharts;
		require.config({
			paths : {
				'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' ,
				'echarts/chart/line' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' //需要的组件
			}
		});
		require(
			[ 'echarts', 
			  'echarts/chart/line'
			], DrawEChart //异步加载的回调函数绘制图表
		);
		//创建ECharts图表方法
		function DrawEChart(ec) {
			eCharts = ec;
			myChart = eCharts.init(document.getElementById('main'));
			myChart.showLoading({
				text : "图表数据正在努力加载..."
			});
			//定义图表options
			var options = {
				title : {
					text : "未来一周气温变化",
					subtext : "纯属虚构",
					sublink : "http://www.baidu.com"
				},
				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',
					boundaryGap : false,
					data : [ '1', '2', '3', '4', '5', '6', '7' ]
				} ],
				yAxis : [ {
					type : 'value',
					axisLabel : {
						formatter : '{value} °C'
					},
					splitArea : {
						show : true
					}
				} ],
				grid : {
					width : '90%'
				},
				series : [ {
					name : '最高气温',
					type : 'line',
					data : [ 11, 22, 33, 44, 55, 33, 44 ],//必须是Integer类型的,String计算平均值会出错
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				} ]
			};
			myChart.setOption(options); //先把可选项注入myChart中
			myChart.hideLoading();
			getChartData();//aja后台交互 
		}
	</script>
	<script type="text/javascript">
		function getChartData() {
			//获得图表的options对象
			var options = myChart.getOption();
			//通过Ajax获取数据
			$.ajax({
				type : "post",
				async : false, //同步执行
				url : "${pageContext.request.contextPath}/echarts/line_data",
				data : {},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					if (result) {
						options.legend.data = result.legend;
						options.xAxis[0].data = result.category;
						options.series[0].data = result.series[0].data;
						myChart.hideLoading();
						myChart.setOption(options);
					}
				},
				error : function(errorMsg) {
					alert("不好意思,大爷,图表请求数据失败啦!");
					myChart.hideLoading();
				}
			});
		}
	</script>
</body>
</html>

注意路径${pageContext.request.contextPath}!


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询