ECharts画动态仪表盘+柱状图（ajax获取+循环画图）

出来工作几个月了，整理下最近学的的东西。刚刚才开通博客，第一篇就先画仪表盘+柱状图。
有什么写的不好的地方，请大家多多指教！

jsp中首先要引用几个文件：

<script type="text/javascript" src="../Js/ECharts/echarts.js"></script><script type="text/javascript" src="../JqueryCss/js/jquery.min.js"></script><script type="text/javascript" src="../xx/xxx.js"></script>

/xx/xxx.js 是我js代码存放的文件。

<div id="cpu" style="width:100%;height:100%;"></div><div id="power" style="width:100%;height:100%;"></div><div id="fans" style="width:100%;height:100%;"></div>

仪表盘就画在这个div里面。

接下来写js，开始画图了。

$(document).ready(function(){      refresh();  });

用ajax提交，取值。把值放入数组中，有几个值就画几个图出来。

 function refresh(){     $.ajax({       type:"post",//传递方式，默认的时get        contentType: "application/x-www-form-urlencoded; charset=gb2312",         data:{assetID:assetID},//传递的参数       url:path+"/physical.do?method=perf",//提交到哪个Action       dataType: "json",       success:function(data){               var cpuList = data.cpuList;                               var cpuArray = new Array();                                $.each(cpuList, function(i, n){                     cpuArray[i]=n.item_val;                                   });                  refreshCPU(cpuArray);               var powerList = data.powerList;                                var powerArray = new Array();                                  $.each(powerList, function(i, n){                 powerArray[i]=n.item_val;                  });               refreshWatts(powerArray);               var fanList = data.fanList;                                fans(fanList);           }           }   }); }

先画整个圆的仪表盘

function refreshCPU(varArray){    var centerx;    var size;    var seriesArray = new Array();    for (var i=0;i<varArray.length;i++){    if(varArray.length<3){        centerx = i*35+22;        size = 70;    }else{        centerx = i*24+14;        size = 55;    }        seriesArray.push({                name:'温度',                type:'gauge',                center : ['50%', centerx+'%'],    // 默认全局居中                radius : size+'%',                min:0,// 最小值                max:80,// 最大值                splitNumber:10,// 分割段数，默认为5                axisLine: {            // 坐标轴线                    lineStyle: {       // 属性lineStyle控制线条样式                        color: [[0.4, 'lightgreen'],[0.6, 'orange'],[1, '#ff4500']],//设置刻度值的颜色                        width: 3,                        shadowColor : '#fff', //默认透明                        shadowBlur: 10                    }                },                axisLabel: {            // 坐标轴小标记                    textStyle: {       // 属性lineStyle控制线条样式                        fontWeight: 'bolder',                        color: '#000',                        shadowColor : '#fff', //默认透明                        shadowBlur: 10                    }                },                axisTick: {            // 坐标轴小标记                    length :15,        // 属性length控制线长                    lineStyle: {       // 属性lineStyle控制线条样式                        color: 'auto',                        shadowColor : '#fff', //默认透明                        shadowBlur: 10                    }                },                splitLine: {           // 分隔线                    length :25,         // 属性length控制线长                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式                        width:3,                        color: '#000',                        shadowColor : '#fff', //默认透明                        shadowBlur: 10                    }                },                pointer: {           // 指针样式                     shadowColor : '#fff', //默认透明                    shadowBlur: 5                },                title : {//设置标题的属性                   offsetCenter: [0,'30%'], //标题位置                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                        fontWeight: 'bolder',                        fontSize: 15,                        fontStyle: 'italic',                        color: '#000',                        shadowColor : '#fff', //默认透明                        shadowBlur: 10                    }                },                detail : {                    backgroundColor: '#fff',                    borderWidth: 1,                    borderColor: '#fff',                    shadowColor : '#fff', //默认透明                    width: 50,                    height:50,                    offsetCenter: [0, '65%'],       // x, y，单位px                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                        fontWeight: 'bolder',                        fontSize: 20,                        color: '#000'                                  }                },                data:[{name: 'CPU'+(i+1)+'(℃)', value: varArray[i]}]            });    }    var option = {        backgroundColor: '#fff',        tooltip : {            formatter: "{a} <br/>{c} {b}"        },        grid : {              width : '20%' , //直角坐标轴占整页的百分比              height : '100%'          },          series : seriesArray    };          var myChart = echarts.init(document.getElementById("cpu"));        myChart.setOption(option,true);// 使用刚指定的配置项和数据显示图表。}

再画半圆的仪表盘

function refreshWatts(varArray){    var centerx;    var size;    var seriesArray = new Array();    for (var i=0;i<varArray.length;i++){    if(varArray.length<=3){        centerx = i*30+21;        size = 80;    }else{        centerx = i*22+17;        size = 65;    }        seriesArray.push({            name:'电压',            type:'gauge',            center : ['50%', centerx+'%'],      // 默认全局居中            radius : size+'%',            min:0,            max:400,            startAngle:180,//开始角度            endAngle:0,//结束角度            splitNumber:10,            axisLine: {            // 坐标轴线                lineStyle: {       // 属性lineStyle控制线条样式                    color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],                    width: 2,                    shadowColor : '#fff', //默认透明                    shadowBlur: 10                }            },            axisLabel: {            // 坐标轴小标记                textStyle: {       // 属性lineStyle控制线条样式                    fontWeight: 'bolder',                    color: '#000',                    shadowColor : '#fff', //默认透明                    shadowBlur: 10                }            },            axisTick: {            // 坐标轴小标记                length :12,        // 属性length控制线长                lineStyle: {       // 属性lineStyle控制线条样式                    color: 'auto',                    shadowColor : '#fff', //默认透明                    shadowBlur: 10                }            },            splitLine: {           // 分隔线                length :20,         // 属性length控制线长                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式                    width:3,                    color: '#000',                    shadowColor : '#fff', //默认透明                    shadowBlur: 10                }            },            pointer: {                width:5,                shadowColor : '#fff', //默认透明                shadowBlur: 5            },            title : {                offsetCenter: [0, '-30%'],       // x, y，单位px                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    fontWeight: 'bolder',                    fontStyle: 'italic',                    color: '#000',                    shadowColor : '#fff', //默认透明                    shadowBlur: 10                }            },            detail : {                borderColor: '#fff',                shadowColor : '#fff', //默认透明                width: 80,                height:30,                offsetCenter: [0, '30%'],       // x, y，单位px                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE                    fontWeight: 'bolder',                    fontSize: 14,                    color: '#000'                }            },            data:[{value: varArray[i], name: '功率'+(i+1)+'(W)'}]        });    }var option = {    backgroundColor: '#fff',    tooltip : {        formatter: "{a} <br/>{c} {b}"    },    grid : {              width : '20%' , //直角坐标轴占整页的百分比              height : '100%'          },          series : seriesArray};         var myCharts = echarts.init(document.getElementById("power"));    myCharts.setOption(option,true);// 使用刚指定的配置项和数据显示图表。}

最后再画一个柱状图

function fans(fanList){    var option = {            tooltip : {                trigger: 'axis'            },             grid: {                x: 60,                y: 30,                x2: 20,                y2: 30                  },            calculable : true,            xAxis : [                {                    type : 'category',                    splitLine:{show: false},                    data :(function(){                      var arr=[];                                     $.each(fanList, function(i, n){                        arr.push("风扇"+(i+1));                        });                        return arr;                   })()                              }            ],            yAxis : [                {                    type : 'value'                }            ],            series : [                {                    type:'bar',                    itemStyle:{                        normal:{                            color:'#4682E4',                            label : {                               show: true,                                position: 'top'                            }                        }                    },                    data :(function(){                     var arr=[];                    $.each(fanList, function(i, n){                         arr.push(n.item_val);                    });                        return arr;                  })()                            }            ]        };        var myChart = echarts.init(document.getElementById("fans"));        myChart.setOption(option,true);// 使用刚指定的配置项和数据显示图表。    }

Action里面的方法

public ActionForward perf(ActionMapping map, ActionForm form,            HttpServletRequest request, HttpServletResponse response)            throws Exception {        String jsonStr = "";        HashMap resultMap = new HashMap();        HostManagerDao hm = new HostManagerDao();               String assetID = request.getParameter("assetID");        try{                            ArrayList cpuList = hm.getHostData(assetID, "1");  //处理器温度            ArrayList powerList = hm.getHostData(assetID, "2");  //功率            ArrayList fanList = hm.getHostData(assetID, "3");  //风扇            resultMap.put("cpuList", cpuList);              resultMap.put("powerList", powerList);            resultMap.put("fanList", fanList);            jsonStr = CIGlobalString.getObjectToJSon(resultMap);        }catch(Exception ex){            ex.printStackTrace();        }        CIGlobalString.toPrint(request, response, jsonStr);        return null;    }

转json

// 对象转成json对象类型    public static String getObjectToJSon(Object obj) {        JSONObject json = JSONObject.fromObject(obj);        return json.toString();    }// 集合转成json对象类型    public static String getListToJSon(List list) {        JSONArray json = JSONArray.fromObject(list);        return json.toString();    }      public static void toPrint(HttpServletRequest request,            HttpServletResponse response, String jsonStr) {        try {            response.setCharacterEncoding("UTF-8");            PrintWriter out = response.getWriter();            // System.out.println(jsonStr);            out.print(jsonStr);            out.flush();            out.close();        } catch (Exception e) {            // TODO Auto-generated catch block            log.info("对象转换成json类型异常。");        }    }

截个图给大家看看效果