Echart——结合SpringMVC

最近在spring框架中使用echart，简单记录下，使用echart版本3.0.0

在springmvc中使用注解@ResponseBody得到json格式数据，然后在js中解析json数据并显示在图表中

SpringMVC返回json格式数据

@ResponseBody 将内容或对象作为 HTTP 响应正文返回，并调用适合HttpMessageConverter的Adapter转换对象，写入输出流。

spring配置文件

<context:component-scan base-package="com.xxx" />
<mvc:annotation-driven />
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="stringHttpMessageConverter" />
<ref bean="jsonHttpMessageConverter" />
</list>
</property>
</bean>
<bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter" />

<bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />

然后在ajax请求中指定返回数据类型json

js解析json数据

function processorData(serviceName){
var time=new Array();
var exceptionCount=new Array();
var accessCount=new Array();
var responseTime=new Array();
var ajaxurl=url;
$.ajax({
url: ajaxurl,
dataType: "json",
success: function(data1) {
var data = eval(data1);
for(var i=0;i<data.length;i++){
time[i]=data[i].minuteString;  //将数据从json中分离出来
exceptionCount[i]=data[i].exceptionCount;
accessCount[i]=data[i].accessCount;
responseTime[i]=data[i].timeCost;
}
createChart(serviceName,time,exceptionCount,accessCount,responseTime);
}
});
}

创建图表

function createChart(serviceName,time,exceptionCount,accessCount,responseTime){
var myChart = echarts.init(document.getElementById('wholeChart'));

var  option = {
title : {
text: '服务调用情况',
subtext: serviceName+'调用情况',
x: 'center',
align: 'right'
},
grid: {
bottom: 80
},
tooltip : {
trigger: 'axis',
formatter: function(params) {
if(params[0].value === undefined){
params[0].value = 0;
}
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + params[0].value + ' (次)<br/>'
+ params[1].seriesName + ' : ' + params[1].value + ' (次) <br/>'+params[2].seriesName + ' : ' + params[2].value + ' (mm)';
},
axisPointer: {
animation: false
}
},
legend: {
data:['异常','调用','响应时间'],
x: 'left'
},
dataZoom: [
{
show: true,
realtime: true,
start: 60,
end: 80
},
{
type: 'inside',
realtime: true,
start: 60,
end: 80
}
],
xAxis : [
{
type : 'category',
boundaryGap : false,
axisLine: {onZero: false},
data : time
}
],
yAxis: [
{
name: '访问次数',
type: 'value',
max: 'auto'
},
{
name: '响应时间(mm)',
nameLocation: 'start',
max: 'auto',
type: 'value',
inverse: true
}
],
series: [
{
name:'异常',
type:'line',
hoverAnimation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
data: exceptionCount
},
{
name:'调用',
type:'line',
hoverAnimation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 2
}
},
data:accessCount
},
{
name:'响应时间',
type:'line',
yAxisIndex:1,
hoverAnimation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
data: responseTime
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
//图表点击事件
myChart.on('click', function (params) {
// 控制台打印数据的名称
console.log(params.name);
});
}

图表效果



用到刷新页面的方法，这里简单记录下

$(document).ready(function(){
setTimeout('refresh()',60000); //指定1秒刷新一次
});

function refresh(){
window.location.reload();
}

[参考]

Spring 3.x MVC 入门4 – @ResponseBody & @RequestBody