使用Echarts画图



1、首先引入包：百度云管家/资源/echarts-2.0.0\

2、后台代码：

前台请求代码：

<ul class="sf-menu">

<li class="current"><a HREF="/admin/dashboard.action">Dashboard</a></li>

<li>

<a HREF="/admin/dashboard.action">服务</a>

<ul>

<li>

<a HREF="/admin/server.action/1">云推送</a>

</li>

<li>

<a HREF="/admin/server.action/2">直播聊天室</a>

</li>

<li>

<a HREF="/admin/server.action/3">passport</a>

</li>

<li>

<a HREF="/admin/server.action/4">订阅</a>

</li>

<li>

<a HREF="/admin/server.action/5">播放记录</a>

</li>

<li>

<a HREF="/admin/server.action/6">收藏</a>

</li>

<li>

<a HREF="/admin/server.action/99">其他</a>

</li>

</ul>

</li>

<li><a HREF="/admin/search.action">搜索</a></li>

</ul>

Controller代码：

@RequestMapping(value = {"/server.action/{id}"}, method = {GET, POST })

@ResponseBody

ModelAndView serverPage(@PathVariable("id") String id, HttpServletRequest request, HttpServletResponse response) throws IOException{

HashMap<String, String> optionmap = redisService.getSummaryByServiceID(id);

ModelAndView mv = createModelAndView(request, "server");

mv.addObject("optionmap", optionmap);

mv.addObject("ids", ErrorType.ids);

mv.addObject("sername", ServerType.getSerTypeMap().get(id));



return mv;

}

Service代码：

public HashMap<String, String> getSummaryByServiceID(String id) {



HashMap<String, String> result = new HashMap<String, String>();



HashMap<String, ArrayList<ErrorTypeBean>> resmap = new HashMap<String, ArrayList<ErrorTypeBean>>();



long beforeTwoHour = DateUtils.getTwoHourBefTime();





Map<Object, Object> keymap = feedbackRedisTemplate.opsForHash().entries("keys");

Map<Object, Object> typeMap;



String[] ids = ErrorType.ids;

//初始化时间轴列表

for(int i=0; i<ids.length; i++){

ArrayList<ErrorTypeBean> list = new ArrayList<ErrorTypeBean>();



ArrayList<Long> lDate = DateUtils.findBetweenDates();

ErrorTypeBean etb = null;

for(int j=0; j<24; j++){

etb = new ErrorTypeBean();

etb.time = lDate.get(j);

list.add(etb);

}

resmap.put(ids[i], list);

}



long keyTime;

String serid;

// 遍历keymap获得hashkey集合

for (Map.Entry<Object, Object> map : keymap.entrySet()) {

String key = (String) map.getKey();

serid = key.split("_")[0];

keyTime = Long.parseLong(key.split("_")[1]);

if (keyTime > beforeTwoHour && serid.equals(id)) {

typeMap = feedbackRedisTemplate.opsForHash().entries(key);

for (Map.Entry<Object, Object> maptemp : typeMap.entrySet()) {



ArrayList<ErrorTypeBean> list = resmap.get((String) maptemp.getKey());

int index = DateUtils.getDateIndex(list.get(0).time, keyTime);

ErrorTypeBean errortype = list.get(index-1);

errortype.count = Long.parseLong((String)maptemp.getValue());

}

}

}



Option opt = null;



String title = "";



for(Map.Entry<String, ArrayList<ErrorTypeBean>> maptemp:resmap.entrySet()){

String key = maptemp.getKey();

ArrayList<ErrorTypeBean> list = resmap.get(key);



title = (list.get(0).getTime() + "").substring(0, 4) + "-" + (list.get(0).getTime() + "").substring(4, 6) + "-" + (list.get(0).getTime() + "").substring(6, 8);



/** x轴类目 */

List<Object> xzhou = new ArrayList<Object>();





for (int i = 0; i < list.size(); i++) {

xzhou.add((list.get(i).getTime() + "").substring(8, 10) + ":" + (list.get(i).getTime() + "").substring(10, 12));

}





/** 错误数 */

List<Object> errornum = new ArrayList<Object>();





for (int i = 0; i < list.size(); i++) {

errornum.add(list.get(i).getCount());

}





opt = new Option();



/** 标题 */

opt.title(ErrorType.errTypeMap.get(key) + ":(" + title + ")");



/** 提示框 */

opt.tooltip().show(true).trigger(Trigger.axis);





/** 图例说明 */

opt.legend().data("错误数");





/** 是否启用拖拽重计算特性 */

opt.calculable(true);





/** x轴 -类目轴 */

opt.xAxis(new CategoryAxis().type(AxisType.category).axisLabel(new AxisLabel().show(true).interval("auto").rotate(45).margin(4).textStyle(new TextStyle().fontFamily("sans-serif").fontSize(12).fontStyle(FontStyle.italic))).data(xzhou.toArray()));





/** Y轴 -值轴 */

opt.yAxis(new ValueAxis().type(AxisType.value).name("错误数").axisLabel(new AxisLabel().formatter("{value} ")));

/** 数据 */

opt.series(new Line().name("错误数").type(SeriesType.line).data(errornum.toArray()));

result.put(key, JSON.toJSONString(opt));

}



return result;

}

返回页面显示页代码：

<script type="text/JavaScript">



require.config({

        paths:{ 

            echarts:'./js/echarts',

            'echarts/chart/bar' : '/js/echarts-2.0.0/doc/example/www/js/echarts-map',

            'echarts/chart/line': '/js/echarts-2.0.0/doc/example/www/js/echarts-map',

            'echarts/chart/map' : '/js/echarts-2.0.0/doc/example/www/js/echarts-map'

        }

    });



require(

       [

           'echarts',

           'echarts/chart/bar',

           'echarts/chart/line',

           'echarts/chart/map'

       ],

       function (ec) {

       


       
<% 

       
HashMap<String, String> map = (HashMap<String, String>)request.getAttribute("optionmap");

String[] ids = (String[])request.getAttribute("ids");

for(int i=0; i<ids.length; i++){

if(map.containsKey(ids[i])){

String option = map.get(ids[i]);



%>

var myChart = ec.init(document.getElementById('graph<%= ids[i]%>'));

           var option = <%= option %>;

           myChart.setOption(option);

           <%

}

}

           %>

       }

   );







//将object转为String

function obj2string(o){ 

   var r=[]; 

   if(typeof o=="string"){ 

       return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\""; 

   } 

   if(typeof o=="object"){ 

       if(!o.sort){ 

           for(var i in o){ 

               r.push(i+":"+obj2string(o[i])); 

           } 

           if(!!document.all&&!/^\n?function\s*toString 

\s*\{\n?\s*

nativecode 

\n?\s*\}\n?\s*$/.test(o.toString)){ 
               r.push("toString:"+o.toString.toString()); 
           } 
           r="{"+r.join()+"}"; 
       }else{ 
           for(var i=0;i<o.length;i++){ 
               r.push(obj2string(o[i])) 
           } 
           r="["+r.join()+"]"; 
       }  
       return r; 
   }  
   return o.toString(); 
}
</script>