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

cenmin的头像 cenmin 0 2016-01-23 11:48 0

 基本信息

× 1   

浏览数: 3134

分享时间: 2 年 前

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();
		}
	}

  • annashetty的头像 annashetty 2018-11-06 17:37 代码数:0

    I’ve been using an Instant Pot for several years now and LOVE it! I use it several times a week – it’s so handy! That pasta dish in your photos looks like heaven, by the way!Interesting and you have very nice way of expressing the article. The author clearly describe all the parts of the article with good language and information. Looking forward to another article.
    bullet force

  • pevahanifo的头像 pevahanifo 2018-11-08 15:17 代码数:0

    Thank you so much for sharing this great blog.Very inspiring and helpful too.Hope you continue to share more of your ideas.I will definitely love to read.Umzugsfirma

您的评论: