ECharts Java 动态加载数据

最新推荐文章于 2024-03-24 00:14:48 发布
VIP文章 最新推荐文章于 2024-03-24 00:14:48 发布
阅读量6.2w 收藏 27
点赞数 12
分类专栏： Java Web ECharts 文章标签： ECharts Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/for_china2012/article/details/45167161/
版权

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(
最低0.47元/天 解锁文章
码农先生
关注
  • 12
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 53
    评论
专栏目录
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
echarts java 动态加载数据_eCharts动态加载各省份的数据
weixin_36398921的博客
02-27 399
假如从数据库读出以下数据，如何将数据展示在地图之上1.部门的名称数据:List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事业部-黑龙江联通项目组, 联通事业部-总部项目中心, 联通事业部-河北联通项目组, 联通事业部-北京联通项目组, 联通事业部-西藏联通项目组, 联通事业部-湖北联通项目组, 联通事业部-江苏联通项目组, ...
H5实现Web ECharts教程：轻松创建动态数据图表
最新发布
interest_ing_的博客
03-24 1458
ECharts是一款由百度前端团队开发的开源可视化库，它提供了丰富的图表类型和灵活的配置选项，使得开发者能够轻松地在Web页面上创建交互式的图表。无论是简单的柱状图、折线图，还是复杂的关系图、地图，ECharts都能够提供强大的支持。
Echarts创建动态图表
T_james的博客
11-14 3593
   偶然的机会，发现echarts可以制作比较精美的图表，进而小小学习了一下，也算知道了一些基本的常识，现与大家进行分享。         ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生...
java中echat如何动态_ECharts Java 动态加载数据
weixin_39636608的博客
02-28 120
1、前台JSP页面ECharts// 配置路径require.config({paths: {echarts: ${ctx}/plugins/echarts-1、前台JSP页面pageEncoding="UTF-8"%>ECharts// 配置路径require.config({paths: {echarts: '${ctx}/plugins/echarts-2.2.1'}});// 按需加...
ECharts Java 动态加载数据，echartsjava
yunhaisss的博客
12-17 796
1、前台jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> ECharts // 配置路径 require.config({ paths: { echarts: ‘${ctx}/plugins/echart
ECharts两种动画效果
ZHI_MO_WEN的博客
03-03 7075
实现echarts桑基图两种动画效果
ECharts数据可视化库--导入EChars库
小马哥的博客
03-03 2186
数据可视化
echarts环形图修改高亮部分的凸起高度
mentalitys的博客
11-22 3075
app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', ...
echarts的showloading属性修改和使用
感谢关注点赞，笔芯啾咪！
04-15 3921
var zhe = echarts.init(document.getElementById('area6'), 'base'); //base为主题的js名称 zhe.showLoading({ text : '加载中...', //加载时候的文本 color:'green', //加载时候小圆圈的颜色 textColor:'wh...
Echarts通过Ajax实现动态数据加载
03-29
Echarts通过Ajax实现动态数据加载，Echarts通过Ajax实现动态数据加载。
JAVA WEB实现echarts动态图表实例.zip
03-20
实例中没有相关数据库，如需运行，请在mysql创建test数据库，并新建表bar，然后创建列 num(数字)，name（文本）两列，添加数据后 即可测试
echarts demo java
02-26
echarts 项目 echarts动态数据加载，结合java的一个demo. 小项目：折线图，柱状图
echarts动态加载 java demo
02-26
echarts动态加载 java demo 基于echarts动态数据加载的一个demo,简洁，经典。 很适合初学者对前后端的结合。
简易的echarts+java的可视化项目
06-16
简易的echarts+java的可视化项目
Java Blob类型和String类型相互转换
热门推荐
FOR_CHINA2012的专栏
07-12 5万+
1、String 转 Blob: String content = "Hello World!"; Blob blob = Hibernate.createBlob(content.getBytes()); 2、Blob 转 String: Blob blob; try{ String content = new S
POI HSSFColor 颜色索引对照表
FOR_CHINA2012的专栏
06-10 4万+
POI HSSFColor颜色索引对照表 . HSSFColor.GREY_80_PERCENT . HSSFColor.INDIGO . HSSFColor.PLUM . HSSFColor.BROWN . HSSFColor.OLIVE_GREEN
echarts在java中使用实例 使用ajax动态加载数据
05-26
使用Echarts在Java中动态加载数据需要以下步骤： 1. 创建一个包含Echarts的HTML页面，通过Ajax请求从后台获取数据，然后渲染Echarts图表。 2. 在Java后端编写一个Controller，接收前端Ajax请求，查询数据库或者其他数据源，然后将数据以JSON格式返回给前端。 3. 在JavaScript中编写Ajax请求，获取后端返回的JSON数据，然后解析数据并渲染Echarts图表。 以下是一个简单的示例代码： 1. HTML页面 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态加载Echarts数据</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> // 使用Ajax获取数据并渲染Echarts图表 function renderChart() { $.ajax({ url: '/getData', type: 'GET', dataType: 'json', success: function (data) { var chart = echarts.init(document.getElementById('chart')); chart.setOption({ title: { text: '动态加载Echarts数据' }, tooltip: {}, xAxis: { data: data.categories }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: data.data }] }); } }); } // 页面加载完成后渲染Echarts图表 $(document).ready(function() { renderChart(); }); </script> </body> </html> ``` 2. Java后端Controller ```java @RestController public class ChartController { @GetMapping("/getData") public Map<String, Object> getData() { // 从数据库或其他数据源查询数据 List<String> categories = Arrays.asList("衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"); List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20); // 将数据以JSON格式返回给前端 Map<String, Object> result = new HashMap<>(); result.put("categories", categories); result.put("data", data); return result; } } ``` 3. JavaScript中的Ajax请求 ```javascript // 使用Ajax获取数据并渲染Echarts图表 function renderChart() { $.ajax({ url: '/getData', type: 'GET', dataType: 'json', success: function (data) { var chart = echarts.init(document.getElementById('chart')); chart.setOption({ title: { text: '动态加载Echarts数据' }, tooltip: {}, xAxis: { data: data.categories }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: data.data }] }); } }); } // 页面加载完成后渲染Echarts图表 $(document).ready(function() { renderChart(); }); ``` 以上是一个简单的使用Echarts在Java中动态加载数据的示例代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 53
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值