echarts图表联动
/**
* @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"></div>
<script type="text/javascript" src="${home }/res/js/echarts.js"></script>
<script type="text/javascript" src="${home }/res/js/macarons.js"></script>
<script type="text/javascript">
var home ="${home}";
//获取到的数据
var context =eval('${strContext}');
//名称数组
var nameArray = new Array();
//数据数组
var dataArray= new Array();
//将数据进行处理
for(var i=0;i<context.length;i++)
{
nameArray.push(context[i].planName);
//二维数组- 保存数据
dataArray[i]= new Array();
dataArray[i].push(context[i].sales);
dataArray[i].push(context[i].administration);
dataArray[i].push(context[i].informationTechology);
dataArray[i].push(context[i].customerSupport);
dataArray[i].push(context[i].development);
dataArray[i].push(context[i].marketing);
}
require.config(
{
paths:{
echarts:'res/js'
}
});
require(
[
'echarts',
'echarts/chart/radar',
'echarts/chart/line'
]
, function(ec)
{
var myChart =ec.init(document.getElementById("myRadio"));
option = {
title : {
text: '预算 vs 开销 vs我的开销（Budget vs spending）',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'vertical',
x : 'right',
y : 'bottom',
data:nameArray//['预算分配（Allocated Budget）','实际开销（Actual Spending）']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
polar : [
{
indicator :
[
{ text: '销售（sales）', max: 6000},
{ text: '管理（Administration）', max: 16000},
{ text: '信息技术（Information Techology）', max: 30000},
{ text: '客服（Customer Support）', max: 38000},
{ text: '研发（Development）', max: 52000},
{ text: '市场（Marketing）', max: 25000}
]
}
],
calculable : true,
series : [
{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
data : [
{
value:dataArray[0],
name:nameArray[0]
} ,
{
value:dataArray[1],
name:nameArray[1]
},
{
value:dataArray[2],
name:nameArray[2]
}
]
}
]
};
myChart.setOption(option);
}
);
</script>
<script type="text/javascript" src="${home }/res/js/jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="${home }/res/js/jquery-1.11.3.min.js"></script>
</body>
</html>
方法2.在类中生成类似js代码，转换成JSON字符串后传入到jsp页面中
关键jar包：ECharts-2.2.6.jar
下载及介绍地址：http://git.oschina.net/free/ECharts#git-readme （根据百度Echarts的一个开源项目，感谢作者）
RadarServiceImpl.java
package com.echarts.service.impl;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.echarts.dao.RadarDao;
import com.echarts.entity.AllocatedBudget;
import com.echarts.service.RadarService;
import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.Polar;
import com.github.abel533.echarts.code.Orient;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.code.Y;
import com.github.abel533.echarts.data.Data;
import com.github.abel533.echarts.feature.DataView;
import com.github.abel533.echarts.feature.Mark;
import com.github.abel533.echarts.feature.Restore;
import com.github.abel533.echarts.feature.SaveAsImage;
import com.github.abel533.echarts.json.FsonOption;
import com.github.abel533.echarts.series.Radar;
/**
* @author lyx
*
* 2015-9-1上午9:04:04
*
*com.echarts.service.impl.RadarServiceImpl
*
*/
@Service("RadarService")
public class RadarServiceImpl implements RadarService{
@Autowired
private RadarDao dao;
public List<AllocatedBudget> addInfo() {
// TODO Auto-generated method stub
return dao.addInfo();
}
public FsonOption radarOption() {
//获得数据
List<AllocatedBudget> list = dao.addInfo();
//option设置
FsonOption option =new FsonOption();
option.title("预算 vs 开销 vs 我的开销（Budget vs spending）", "纯属虚构");
option.tooltip(Trigger.axis);
//图例
option.legend().orient(Orient.vertical).x(X.right).y(Y.bottom);//.data("预算分配（Allocated Budget）","实际开销（Actual Spending）","我的开销");
//图例说明
for (AllocatedBudget alloc: list) {
option.legend().data().add(alloc.getPlanName());
}
//工具栏
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage);
option.calculable(true);
//极坐标
Polar polar = new Polar();
polar.indicator(new Data().text("销售（sales）").max(6000),
new Data().text("管理（Administration）").max(16000),
new Data().text("信息技术（Information Techology）").max(30000),
new Data().text("客服（Customer Support）").max(38000),
new Data().text("研发（Development）").max(52000),
new Data().text("市场（Marketing）").max(25000));
option.polar(polar);
//雷达图
Radar radar = new Radar("预算 vs 开销（Budget vs spending）");
//雷达图数据
for (AllocatedBudget alloc: list) {
<span style="white-space:pre"> </span>radar.data(new Data().name(alloc.getPlanName().toString()).value(alloc.getSales(),alloc.getAdministration(),alloc.getInformationTechology(),alloc.getCustomerSupport(),alloc.getDevelopment(),alloc.getMarketing()));
}
option.series(radar);
System.out.println(option);
return option;
}
}
controller方法：
/**
* @param request
* @return
* 在dao层的类中实现Option
*/
@RequestMapping("/radarOption")
public ModelAndView radarOption(HttpServletRequest request)
{
FsonOption option = service.radarOption();
request.setAttribute("option", option);
return new ModelAndView("/rect");
}
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"></div>
<script type="text/javascript" src="${home }/res/js/echarts.js"></script>
<script type="text/javascript" src="${home }/res/js/macarons.js"></script>
<script type="text/javascript">
var home ="${home}";
require.config({
paths:
{
echarts:'res/js'
}
});
var option = ${option};
require(
[
'echarts',
'echarts/chart/radar',
'echarts/chart/line'
],
function(ec)
{
var myChart =ec.init(document.getElementById("myRadio"));
myChart.setOption(option);
}
);
</script>
<script type="text/javascript" src="${home }/res/js/jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="${home }/res/js/jquery-1.11.3.min.js"></script>
</body>
</html>
运行成功的后页面源码：
运行后的js:
var home ="/springEcharts001";
require.config({
paths:
{
echarts:'res/js'
}
});
var option = {"calculable":true,
"legend":{"data":["预算分配","实际开销","我的开销"],"orient":"vertical","x":"right","y":"bottom"},
"polar":[{"indicator":[{"max":6000,"text":"销售（sales）"},{"max":16000,"text":"管理（Administration）"},
{"max":30000,"text":"信息技术（Information Techology）"},{"max":38000,"text":"客服（Customer Support）"},
{"max":52000,"text":"研发（Development）"},{"max":25000,"text":"市场（Marketing）"}]}],
"series":[{"data":[{"name":"预算分配","value":[4300,10000,28000,35000,50000,19000]},
{"name":"实际开销","value":[5000,14000,28000,31000,42000,21000]},
{"name":"我的开销","value":[1000,4000,8000,8000,20000,10000]}],
"name":"预算 vs 开销（Budget vs spending）","type":"radar"}],
"title":{"subtext":"纯属虚构","text":"预算 vs 开销 vs 我的开销（Budget vs spending）"},
"toolbox":{"feature":{"mark":{"lineStyle":{"color":"#1e90ff","type":"dashed","width":2},"show":true,
"title":{"mark":"辅助线开关","markClear":"清空辅助线","markUndo":"删除辅助线"}},
"dataView":{"lang":["数据视图","关闭","刷新"],"readOnly":false,"show":true,"title":"数据视图"},
"restore":{"show":true,"title":"还原"},"saveAsImage":{"lang":["点击保存"],"show":true,"title":"保存为图片","type":"png"}},"show":true},
"tooltip":{"trigger":"axis"}};
require(
[
'echarts',
'echarts/chart/radar',
'echarts/chart/line'
],
function(ec)
{
var myChart =ec.init(document.getElementById("myRadio"));
myChart.setOption(option);
}
);
