当前位置:首页 » JAVA技术教程

Echarts 动态获取数据进行图表展示的Java示例

2018-11-13 15:43 本站整理 浏览(3103)
Echarts官网的demo都采用的数据都是静态数据,本demo是在Echarts官网入门demo的基础上改的,从后台 获取数据并展示,供入门参考

前端页面代码    

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>
	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
	<div id="main" style="width: 800px; height: 300px"></div>
	<!-- ECharts单文件引入 -->
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="build/dist/echarts.js"></script>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		// 路径配置
		require.config({
			paths : {
				echarts : 'build/dist'
			}
		});

		// 使用
		require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
		], function(ec) {
			// 基于准备好的dom,初始化echarts图表
			var myChart = ec.init(document.getElementById('main'));
			var option = {
				tooltip : {
					show : true
				},
				legend : {
					data : []
				},
				xAxis : [ {
					type : 'category',
					data : []
				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : []
			};
			$.ajax({
				type : "POST",
				url : "gettestdata",
				dataType : "json",
				success : function(result) {
					//将从后台接收的json字符串转换成json对象
					var jsonobj = eval(result);
					//给图标标题赋值
					option.legend.data = jsonobj.legend;
					//读取横坐标值
					option.xAxis[0].data = jsonobj.axis;
					var series_arr = jsonobj.series;
					//驱动图表生成的数据内容,数组中每一项代表一个系列的特殊选项及数据
					for (var i = 0; i < series_arr.length; i++) {
						option.series[i] = result.series[i];
					}
					//过渡控制,隐藏loading(读取中)
					myChart.hideLoading();
					 // 为echarts对象加载数据
					myChart.setOption(option);
				}
			});
		});
	</script>
</body>

后台数据封装代码    

//通过ajax请求数据 将请求的数据返回到页面进行图表的显示
	@RequestMapping("gettestdata")
	public void getTestData(HttpServletResponse response) {
		List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "销量"}));
		List<String> axis = new ArrayList<String>(
				Arrays.asList(new String[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" }));
		List<Series> series = new ArrayList<Series>();
		series.add(new Series("销量", "bar", new ArrayList<Integer>(Arrays.asList(5, 20, 40, 10, 10, 20))));
		Echarts echarts = new Echarts(legend, axis, series);
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out;
		try {
			out = response.getWriter();
			Gson gson = new Gson();
			String str = gson.toJson(echarts);
			System.out.println("str:"+str);
			out.write(str);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}