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

来源：网络编辑：佚名时间：2015-09-28人气：

恶霸冷少别吻我,慕岩简历,缘来非诚勿扰最新一期

Echarts官网的demo都采用的数据都是静态数据，本demo是在Echarts官网入门demo的基础上改的，从后台获取数据并展示，供入门参考 标签： <无>

代码片段(2) [全屏查看所有代码]

1. [代码]前端页面代码跳至 [1] [2] [全屏预览]

<%@ 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>

2. [代码]后台数据封装代码跳至 [1] [2] [全屏预览]

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

poi根据模板导出excel

需要预先新建编辑好一个excel文件，设置好样式。编辑好输出的数据，根据excel坐标一一对应。

使用poi处理excel中文本的工具类

尽量重用poi已有代码，整合之前写的excel处理文本公共方法标签：-->-->-->1.[文件]Main.java~969B(0)packagewhow;importjava.io.

Tags标签lt gt 数据 echarts series

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

代码片段(2) [全屏查看所有代码]

1. [代码]前端页面代码 跳至 [1] [2] [全屏预览]

2. [代码]后台数据封装代码 跳至 [1] [2] [全屏预览]

poi根据模板导出excel

使用poi处理excel中文本的工具类

热门推荐

1. [代码]前端页面代码跳至 [1] [2] [全屏预览]

2. [代码]后台数据封装代码跳至 [1] [2] [全屏预览]