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