示例：接收JSon数据并转为Echarts表格

最新推荐文章于 2023-04-29 09:40:13 发布
最新推荐文章于 2023-04-29 09:40:13 发布
阅读量3.8k 收藏 14
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiudechao1/article/details/96167220
版权

实现效果如下：

Debug拿到AyjgReportController.java传过来的“last7days”数据如下：

[{counts=98.0, date=06-29, endDate=, money=10.70, moneyDf=0.0, startDate=}, {counts=96.0, date=07-01, endDate=, money=8.64, moneyDf=0.0, startDate=}, {counts=107.0, date=06-28, endDate=, money=12.52, moneyDf=0.0, startDate=}, {counts=120.0, date=07-03, endDate=, money=11.28, moneyDf=0.0, startDate=}, {counts=184.0, date=07-02, endDate=, money=14.89, moneyDf=0.0, startDate=}, {counts=0.0, date=06-30, endDate=, money=0.00, moneyDf=0.0, startDate=}, {counts=109.0, date=07-04, endDate=, money=11.05, moneyDf=0.0, startDate=}]

 

即JSon格式如下：

{
	"last7days": [{
		"counts": 98.0,
		"date": "06-29",
		"endDate":,
		"money": 10.70,
		" moneyDf":,
		"startDate": 
	}, {
		"counts": 96.0,
		"date": "07-01",
		"endDate":,
		"money": 8.64,
		" moneyDf":,
		"startDate": 
	}]
}

思路如下：

将JSon数据一条一条取出，其中counts、date、money分别放在三个数组，

使用Echarts创建两个option，counts数组作为第一个option的series，money作为第二个option的series，date作为共用的xAxis横坐标。

创建数组：

var days_counts = new Array();

var days_money = new Array();

var days_date = new Array();

 

循环取出数据放在数组中：

<c:forEach var="var" items="${last7days}">

    days_counts.push('${var.counts}');

    days_money.push('${var.money}');

    days_date.push('${var.date}');

</c:forEach>

 

创建函数将数组数据生成Echarts表中：

function chart(chart_1, chart_2, data_1, data_2, scale) {

    var chart_01 = echarts.init(document.getElementById(chart_1));

    var chart_02 = echarts.init(document.getElementById(chart_2));

    var option_01 = {}

    var option_02 = {}

    chart_01.setOption(option_01);

    chart_02.setOption(option_02);

}

chart_1、和chart_2是两个html  div定位元素，（因为要做两张表格，一个朝上一个朝下，一个div放一个表格）

data_1、data_2是分别是money和counts，即柱状图的数据，

scale是横坐标轴坐标。

 

最后调用函数

chart('main_01', 'main_02', days_money, days_counts, days_date);

 

function函数如下：

function chart(chart_1, chart_2, data_1, data_2, scale) {
			// 基于准备好的dom，初始化echarts实例
			var chart_01 = echarts.init(document.getElementById(chart_1));
			var chart_02 = echarts.init(document.getElementById(chart_2));

			// 指定图表的配置项和数据
			var option_01 = {

				tooltip : {
					show : false,
				},

				xAxis : {
					data : scale,
					show : false,

				},
				yAxis : {
					inverse : false,
					name : '(万元)          ',
					axisLabel : {
						show : true,
						textStyle : {
							color : '#cecccc'
						}
					},
					axisLine : {
						lineStyle : {
							color : '#cecccc',
						}
					}
				},
				series : [ {
					name : '金额',
					type : 'bar',
					data : data_1,
					barWidth : 15,//柱图宽度
					color : "#59c570",
					itemStyle : {
						normal : {
							//柱形图圆角，初始化效果
							barBorderRadius : [ 10, 10, 0, 0 ],
							label : {
								show : true,
								position : 'top',
								textStyle : {
									color : '#333'
								},
							}
						},
					}
				} ]
			};
			var option_02 = {

				tooltip : {
					show : false,
				},

				xAxis : {
					data : scale,
					axisLabel : {
						show : true,
						textStyle : {
							color : '#cecccc'
						}
					},
					axisLine : {
						lineStyle : {
							color : '#cecccc',
						}
					}
				},
				yAxis : {
					inverse : true,
					name : '(个)         ',
					axisLabel : {
						show : true,
						textStyle : {
							color : '#cecccc'
						}
					},
					axisLine : {
						lineStyle : {
							color : '#cecccc',
						}
					}
				},
				series : [ {
					name : '人数',
					type : 'bar',
					data : data_2,
					barWidth : 15,//柱图宽度
					color : "#76c3e5",
					itemStyle : {
						normal : {
							//柱形图圆角，初始化效果
							barBorderRadius : [ 0, 0, 10, 10 ],
							label : {
								show : true,
								position : 'bottom',
								textStyle : {
									color : '#333'
								},
							}
						}
					},
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			chart_01.setOption(option_01);
			chart_02.setOption(option_02);
		};

 

ayjg.jsp中的JavaScript代码如下，

	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>
	<script
		src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.common.js"></script>
	<script type="text/javascript">
		function chart(chart_1, chart_2, data_1, data_2, scale) {
			// 基于准备好的dom，初始化echarts实例
			var chart_01 = echarts.init(document.getElementById(chart_1));
			var chart_02 = echarts.init(document.getElementById(chart_2));

			// 指定图表的配置项和数据
			var option_01 = {

				tooltip : {
					show : false,
				},

				xAxis : {
					data : scale,
					show : false,

				},
				yAxis : {
					inverse : false,
					name : '(万元)          ',
					axisLabel : {
						show : true,
						textStyle : {
							color : '#cecccc'
						}
					},
					axisLine : {
						lineStyle : {
							color : '#cecccc',
						}
					}
				},
				series : [ {
					name : '金额',
					type : 'bar',
					data : data_1,
					barWidth : 15,//柱图宽度
					color : "#59c570",
					itemStyle : {
						normal : {
							//柱形图圆角，初始化效果
							barBorderRadius : [ 10, 10, 0, 0 ],
							label : {
								show : true,
								position : 'top',
								textStyle : {
									color : '#333'
								},
							}
						},
					}
				} ]
			};
			var option_02 = {

				tooltip : {
					show : false,
				},

				xAxis : {
					data : scale,
					axisLabel : {
						show : true,
						textStyle : {
							color : '#cecccc'
						}
					},
					axisLine : {
						lineStyle : {
							color : '#cecccc',
						}
					}
				},
				yAxis : {
					inverse : true,
					name : '(个)         ',
					axisLabel : {
						show : true,
						textStyle : {
							color : '#cecccc'
						}
					},
					axisLine : {
						lineStyle : {
							color : '#cecccc',
						}
					}
				},
				series : [ {
					name : '人数',
					type : 'bar',
					data : data_2,
					barWidth : 15,//柱图宽度
					color : "#76c3e5",
					itemStyle : {
						normal : {
							//柱形图圆角，初始化效果
							barBorderRadius : [ 0, 0, 10, 10 ],
							label : {
								show : true,
								position : 'bottom',
								textStyle : {
									color : '#333'
								},
							}
						}
					},
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			chart_01.setOption(option_01);
			chart_02.setOption(option_02);
		};
		
		//获取动态数据
		var days_counts = new Array();
		var days_money = new Array();
		var days_date = new Array();
		var weeks_counts = new Array();
		var weeks_money = new Array();
		var weeks_date = new Array();
		var year_counts = new Array();
		var year_money = new Array();
		var year_date = new Array();
		<c:forEach var="var" items="${last7days}">
		days_counts.push('${var.counts}');
		days_money.push('${var.money}');
		days_date.push('${var.date}');
		</c:forEach>
		<c:forEach var="var" items="${last4Weeks}">
		weeks_counts.push('${var.counts}');
		weeks_money.push('${var.money}');
		weeks_date.push('${var.date}');
		</c:forEach>
		<c:forEach var="var" items="${last6Months}">
		year_counts.push('${var.counts}');
		year_money.push('${var.money}');
		year_date.push('${var.date}');
		</c:forEach>

		var scale = [ "04-17", "04-18", "04-19", "04-20", "04-21", "04-22",
				"04-23" ]; //坐标刻度
		chart('main_01', 'main_02', days_money, days_counts, days_date);
		chart('main_03', 'main_04', weeks_money, weeks_counts, weeks_date);
		chart('main_05', 'main_06', year_money, year_counts, year_date);
		more(".btn-more", 10);
		more(".btn-item-more", 70);
	</script>

 

leo_qiu_s
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts开发实战(1) ---- ECharts获取Java后台JSON数据，渲染显示图表
luobw的博客
02-12 1259
https://blog.csdn.net/chenchunlin526/article/details/78843426 借鉴： package com.*.trs.patentsearch.controller; import /* ******其他导入省略了***** */ import search.web.controller.BaseController; import co...
多种echart图转表格
最新发布
qq_63431773的博客
05-16 403
项目中提到了一个需求，想要看到echarts图表中的数据，这里使用toolbox工具栏渲染出一个table表格，并加入导出excel功能。所以就用到echarts配置项中的toolbox工具栏，使用 jquery.table2excel.js实现 导出excel功能。首先引入jquery.js，再次引入 jquery.table2excel.js。
Python可视化学习——使用JSON进行数据转换、pyecharts模块调用以及可视化案例的介绍（可视化案例数据暂无），柱状图及动态柱状图的构建
Williamtym的博客
04-29 3946
Python可视化学习——使用JSON进行数据转换、pyecharts模块调用以及可视化案例的介绍（可视化案例数据暂无），柱状图及动态柱状图的构建
JavaScript大数据图表（堆积柱状图），数据在外部JSON中
qq_47801382的博客
12-16 1722
JavaScript大数据图表（堆积柱状图），注意JSON文件
一个解析json串并组装echarts的option的函数解析
weixin_30627341的博客
12-16 178
缘起： 在组装echart页面的时候，遇到这样一个问题，它是一个需要在循环内层的时候，同时循环外层，在内层循环中就要将外层获取的值存入，导致了一种纠缠状态，费了老劲儿，终于得到如下解决。记录之，绿色为语句功能注释。 /** * @desc 获取用户使用网络数据 * @param index_type * @param chatId */...
ThinkPHP中使用ajax接收json数据的方法
10-25
总之，ThinkPHP通过`json_encode()`函数实现了将PHP数据转化为JSON，而前端通过jQuery的AJAX方法发送请求并接收JSON数据。理解这一过程对于构建动态、实时的Web应用至关重要。在实际开发中，还要注意安全性问题，...
websocket_demo:websocket示例，可发送接收json数据
05-19
Websocket示例作者：卞荣成作者博客：作者网站：本项目采用“保持署名—非商用”创意共享4.0许可证。只要保持原作者署名和非商用，您可以自由地阅读、分享、修改。详细的法律条文请参见网站。用法1、在cmd中运行命令...
Vue导出json数据到Excel电子表格的示例
11-27
网上看了很多文档感觉都不全，这里写一篇完整的详细教程。 一、安装依赖（前面基本一样） npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二、下载两个所需要的js...
AJAX如何接收JSON数据示例介绍
10-27
如何使用AJAX返回JSON数据，就是dataType，当你设置json后返回的json字符串传递到客户端就是JSON对象了，示例如下，感兴趣的朋友可以参考下
Echarts 全国乡镇级界线，行政界线 json数据
04-10
使用这份数据时，你需要在ECharts配置项中指定地图数据源，并加载这个JSON文件。例如： ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { series: [{ type: 'map', ...
Echarts实例JSON数据
05-06
echarts结合百度地图、高德地图实现风向图；echarts实例中json数据；echarts结合百度地图、高德地图实现风向图；echarts实例中json数据
Echarts实战案例代码(11)：利用geojson数据地图map组件生成js本地版直接访问的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-16 2893
series-map组件，在构建地理区域数据可视化时，一般是使用getJSON()来获取geojso数据，然后进行渲染。但是使用$.getJSON()就必须在http服务下进行访问，需要搭建http服务器。 代码如下： //调用地图geojson $.getJSON('geojson/au-all.geo.json', function (data) { //some codes; } 然后通过：http://test.com/进行预览访问。 能不能在本地直接点击访问呢？答案是肯定的
ECharts动态获取后台传过来的json数据进行多个折线图的显示，折线的数据由后台传过来...
weixin_30386713的博客
04-13 1039
ECharts 多个折线图动态获取json数据 效果图如下： 一.html部分 <p id="TwoLineChart" style="width:100%; height:400px;"></p> 二.js部分 <script type="text/JavaScript"> function loadTwoLine() { ...
Echarts 读取本地 json 文件所遇到的坑
菜鸟IT女
12-30 3234
一、第 1 坑 1.报错情况 最近，老Amy 想搭建一个动态加载数据的可视化大屏，之前所掌握的 pyecharts 不够用了。于是就咔咔咔的看 echarts 官网； 在练习读取本地 json 文件时，我的代码与官方文档并无差别，如下： 但打开控制台，突如其来的报错一下子就给我整不会了，报错如下： 2.思考 如果代码一致，但运行出问题，就可能是我引入的 js 文件版本与官网的不同，导致相同语法但效果不同。我的版本如下： echarts.min.js jquery-3.6.0.min.js 然而，我也
echars 横向柱图 dataset赋值数据为json键值对形式
maying0124的博客
08-20 1141
echars 横向柱图 chars3 = echarts.init(document.getElementById('chart03'),'light'); chartsColumnOptionsTest(chars3,incomeClass); /*横向柱图*/ function chartsColumnOptionsTest(containerid,data1){ var option = { color:['#61a0a8'], tooltip: { trigger:
json 数据 生成 图表_比Excel更美观！你可知PhotoShop也能画图表
weixin_39876514的博客
11-29 543
[PConline]做设计难免会遇到图表，一般的图表都是通过Excel生成，但Excel所生的图表，除了在外观控制上比较麻烦以外，不利于后期处理也是个让人非常头疼的问题。那么我们在进行日常设计时，如果遭遇这种图表需求怎么办？今天小编就给大家安利一款PS小插件，利用它你也可以在PS里秒画图表！用工具在PS画的图表，非常快，大家可以自行数秒哈~这款插件的名字叫“PS拉框助手”，能够在PS内直接创建图表...
页面iframe内嵌eCharts相关问题处理
kaizq的专栏
07-12 2596
1 eCharts点击事件反复调用打开多个页面 适当位置添加 wordChart.clear()和 wordChart.off('click')，代码如下： wordChart.clear() wordChart.setOption(wordOpt); wordChart.off('click') wordChart.on("click", function(e) { window.open(e.data.url); }); 2 eCharts之ur...
hv::Json 整型数组 转为 std::vector<int>
07-27
上述示例中，首先定义了一个JSON字符串 `jsonString`，其中包含一个名为 `array` 的整型数组。然后，使用 `hv::Json` 对象解析该JSON字符串，并获取 `array` 字段的值。 接下来，通过判断 `jsonArray` 是否为数组...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值