echarts-springmvc+echarts实现图表

最新推荐文章于 2024-08-13 18:13:57 发布

六月心悸

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量1.3w

点赞数 2

分类专栏：数据可视化（Echarts&D3js）文章标签： springmvc echarts

本文链接：https://blog.csdn.net/u013147600/article/details/48182647

版权

本文介绍如何在SpringMVC项目中结合ECharts展示图表，通过两种方法将数据传递到jsp页面的js中：一是直接传递数据，二是生成JSON字符串。详细步骤包括controller和jsp页面的代码示例，提供了效果截图和源码下载链接。

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

springmvc+echarts实现图表

效果图：

两种方法实现的效果都一样，不过针对此图的话，感觉方法2更好。

Echarts:参照的例子： http://echarts.baidu.com/doc/example/radar1.html

下面只是关键代码：具体看源码

该项目源码下载：http://download.csdn.net/detail/u013147600/9071341

方法1.直接把所需数据传到jsp页面中的js中;

controller类：

/**
	 * @param request
	 * @return
	 * 在前端js实现图表
	 */
	@RequestMapping("/showRadio")
	public ModelAndView showRadio(HttpServletRequest request)
	{
		
	
		List<AllocatedBudget> list = service.addInfo();
		
		
		String strContext =JSON.toJSONString(list);
		System.out.println(strContext);
		
		request.setAttribute("strContext",strContext);
	
		
		return new ModelAndView("/radio1");
	}

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("home", path);
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>雷达图</title>
  
  </head>
  
  <body>
  		<h2>雷达图</h2>
  	
  	<div id="myRadio"  style="height:400px&#