第一次使用echart从后台获取数据动态显示到页面

本文详细介绍了如何结合后台数据使用Echarts绘制图表,包括下载echarts.js,创建数据Bean,定义Service接口及其实现,以及在JSP页面中处理数据并初始化图表。通过callbackFn和initReport方法,实现了动态获取数据库数据并展示在图表上。此教程适用于初学者,旨在提供一个基础的Echarts与Java结合的实践案例。
摘要由CSDN通过智能技术生成

第一次使用Echart绘制图表,看了两天,终于结合后台给整出来了。走过之后再看看,其实很简单的。不多说了,直接上图:

第一步:去echarts官方下载最新的js; 官方地址 : echarts.baidu.com

            我下的是3.4.0版的:echarts.min.js

第二步:创建一个ReportDataBean,在该类中设置两个属性:List<String>categories 和 List<Integer> data,具体如下图
        ReportDataBean:用来记录和存储需要传递到前台页面中显示的数据集合

public class ReportDataBean {
	private List<String> categories;
	private List<Integer> data;
	public List<String> getCategories() {
		return categories;
	}
	public void setCategories(List<String> categories) {
		this.categories = categories;
	}
	public List<Integer> getData() {
		return data;
	}
	public void setData(List<Integer> data) {
		this.data = data;
	}	
}

第三步:创建EchartReportService ,TestDataService,和各自实现。EchartReportService是所以对外调用的主Service,而TestDataService是具体的业务Service

       1.EchartReportService:模板接口,用来以后进行不同模板间进行扩展 

public interface EchartReportService {	
	public JSONObject getDataJson();	
}
       2.TestDataService :具体实现数据实现接口,用来实现获取具体业务相关的数据,继承了EchartReportService
public interface Te
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值