JFinal使用ajax给echarts柱状图动态传值

TinpeaV

已于 2024-01-16 09:17:42 修改

阅读量571

点赞数

于 2022-06-22 19:41:37 首次发布

本文链接：https://blog.csdn.net/tinpeav/article/details/125415227

版权

本文介绍了如何使用ECharts库创建一个动态柱状图，展示了如何通过Service与Controller交互，查询数据库并返回排名前10的证书持有者数据。关键步骤包括初始化图表、定义数据结构、编写Service查询API和Controller响应，最后通过AJAX更新图表内容。

摘要由CSDN通过智能技术生成

业务：显示前十名拥有证书最多的人。

思路：创建一个页面带有无数据的echarts柱状图，编写Service方法（查询到你所要展示的X轴数据以及Y轴数据），编写Controller方法（获取到Serivce查询到的数据，然后遍历这些数据，通过条件把数据通过json格式返回给页面）,回到页面通过ajax获取Controller的json数据，然后传值到data。

1.首先创建一个echarts容器

<div class="col-xs-6">
	<h3 >排行榜</h3>
	<div id="main2" style="width: 800px;height:400px;"></div>
</div>

2.柱状图的配置（无数据）

	$(function($){
		var chartDom = document.getElementById('main2');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		  xAxis: {
		    type: 'category',
		    data: []
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      data: [],
		      type: 'bar'
		    }
		  ]
		};				
	});

3.Service方法

	//对应人的证书数量排名
	public List<Patent> findPByAuthor() {
		String sql = "SELECT author,COUNT(patentname) as 'num' FROM patent GROUP BY author ORDER BY COUNT(patentname) DESC LIMIT 0,10";
		return dao.find(sql);	
	}

4.Controller方法

	public void chartsAuthor() {
		//查询到所需数据
		List<Patent> author = echartsService.findPByAuthor();
		//遍历X轴的数据
		List<String> authList = author.stream().map(au->{
			return au.getStr("author");
		}).collect(Collectors.toList());
		//遍历Y轴的数据
		List<Long> numList = author.stream().map(au->{
			return au.getLong("num");
		}).collect(Collectors.toList());
		//返回Json数据
		renderJson(Ret.ok("authList", authList).set("numList", numList));
	}

5.Service和Controller方法写好之后，就开始使用ajax向柱状图传递数据

	$(function($){
		var chartDom = document.getElementById('main2');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		  xAxis: {
		    type: 'category',
		    data: []
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      data: [],
		      type: 'bar'
		    }
		  ]
		};
		
        //ajax的get方法传值
		$.get('/echarts/chartsAuthor',function(result){
			console.log(result);
			if(result.state === 'ok'){
				option.xAxis.data = result.authList;
				option.series[0].data = result.numList;
				myChart.setOption(option);
			}
			
			console.log(option)
		},'json');
		//myChart.setOption(option);
				
	});

6.效果