echar 为什么时间坐标折现图不能正确显示

傻_小z 发布于 2015/12/26 13:37
阅读 280
收藏 0
var cpu="";
var jvm="12";
var ddr="43";


// 路径配置
require.config({
    paths: {
        echarts: 'core/js/echarts/build/dist'
    }
});
    
 // 使用
require(
    [
        'echarts',
        'echarts/chart/bar' ,// 使用柱状图就加载bar模块,按需加载
        'echarts/chart/gauge',
        'echarts/chart/line',
    ],
    drawchart
);
function drawchart(ec) {
drawline (ec);
drawgauge(ec);
}; 
    
function drawline (ec) {
var ccpu=[]; 
var cddr=[]; 
var cjvm=[]; 
var cthread=[]; 
    // 基于准备好的dom,初始化echarts图表
    var myLine = ec.init(document.getElementById('lineT')); 
    
    myLine.showLoading({
        text: '正在努力的读取数据中...',    //loading话术
    });
    
    $.ajax({
        type:"post",
        url: contextPath+"/MonitorController/findMon",
        dataType: "json", 
        success:function(data){
        ccpu=eval("("+data.CCpu+")");
        cjvm=eval("("+data.CJvm+")");
        cddr=eval("("+data.CDdr+")");
        cthread=eval("("+data.CThread+")");
        }

    });
    myLine.hideLoading();
    
    var option = {
    title : {
           text : '系统使用情况',
           subtext : ''
       },
       tooltip : {
           trigger: 'item',
           formatter : function (params) {
               var date = new Date(params.value[0]);
               data = date.getFullYear() + '-'
                      + (date.getMonth() + 1) + '-'
                      + date.getDate() + ' '
                      + date.getHours() + ':'
                      + date.getMinutes();
               return data + '<br/>'
                      + params.value[1] + ', ' 
                      + params.value[1];
           }
       },
       toolbox: {
           show : true,
           feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               restore : {show: true},
               saveAsImage : {show: true}
           }
       },
       dataZoom: {
           show: true,
           start : 40
       },
       legend : {
           data:['cpu占用率','jvm内存占用率','物理内存占用率','线程数'],
       },
       grid: {
        x:130,
           y2:100,
           width:900
       },
       xAxis : [
           {
               type : 'time',
               splitNumber:15,
               axisTick:true,
               axisLabel:{
                rotate:-45,
                formatter:function(params){
                var date = new Date(params);
                   data = date.getFullYear() + '-'
                          + (date.getMonth() + 1) + '-'
                          + date.getDate() ;
                   return data ;
                }
                }
           }
       ],
       yAxis : [
           {
               type : 'value',
               axisLabel : {
                     formatter: '{value} %'
                }
           },{
               type : '线程数',
               axisLabel : {
                     formatter: '{value} 个'
                }
           }
       ],
       series : [
           {
               name: 'cpu占用率',
               type: 'line',
               showAllSymbol: true,
               symbolSize: function (value){
                return 1;
               },
               data:ccpu
           },{
               name: 'jvm内存占用率',
               type: 'line',
               showAllSymbol: true,
               symbolSize: function (value){
                return 2;
               },
               data: cjvm
           },{
               name: '物理内存占用率',
               type: 'line',
               showAllSymbol: true,
               symbolSize: function (value){
                return 2;
               },
               data: cddr
           },{
               name: '线程数',
               type: 'line',
               yAxisIndex:1,
               showAllSymbol: true,
               symbolSize: function (value){
                return 2;
               },
               data: cthread
           }
       ]
   };  
   
   timeTicket = setInterval(function (){
    myLine.setOption(option, true);
   },10000);

};


通过ajax之后data里传回来的的值是json格式的值,打开页面的时候显示没有数据,但是通过火狐浏览器调试在ajax处设断点的方法也能正常显示折线图和数据,求大神告知

加载中
返回顶部
顶部