ECharts Java 动态加载数据

最新推荐文章于 2024-06-28 14:58:31 发布

原创

最新推荐文章于 2024-06-28 14:58:31 发布 · 6.2w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#ECharts #Java

本文介绍了如何在Java环境中动态加载数据到ECharts图表中，通过前台JSP页面配合后台处理，利用Fastjson进行数据转换，并展示了最终的实现效果。ECharts是一个强大的可视化库，而Java类库提供方便的集成方式。

1、前台JSP页面

<%@ 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="${ctx}/plugins/echarts-2.2.1/echarts.js"></script>
	<script type="text/javascript" src="${ctx}/plugins/jquery-1.8.3/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		// 配置路径
		require.config({
			paths: {
				echarts: '${ctx}/plugins/echarts-2.2.1'
			}
		});
		
		// 按需加载
		require(
			[
			 	'echarts', 
			 	'echarts/chart/bar',
			 	'echarts/chart/line'
			],
			function (ec) {
				var chart = document.getElementById('chart');
				var echart = ec.init(chart);
				
				echart.showLoading({
					text: '正在努力加载中...'
				});
				
				var categories = [];
				var values = [];
				
				// 同步执行
				$.ajaxSettings.async = false;
				
				// 加载数据
				$.getJSON('${ctx}/dataAccessServlet', function (json) {
					categories = json.categories;
					values = json.values;

最低0.47元/天解锁文章