echarts使用来显示监控数据

在做自动化运维平台的时候，有的时候需要在界面上显示一些图表，之前一直没有弄，主要是比较麻烦，今天抽出来时间专门研究了一上午，基本的图形绘制已经可以实现了，主要是测试了下那种x轴是时间轴，y轴是指的情况，对于那些饼图之类的静态图形还是很简单的。花费的时间比较多，主要是开始的思路是错误的，一开始想的是用前端的时间进行显示，这个完全是错误，而且也是不实际的，所有的数据都是从后台取，包括时间，而且x轴的类型选择category比较方便，我使用time类型没有能正确显示。
下面贴代码：

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {    
                text: 
            },
            tooltip: {
                trigger: 'axis', 
            },
            dataZoom: [
                 {
                     type: 'slider',    
                     start: 0,          
                     end: 100
                 },
                 {
                     type: 'inside',    
                     start: 0,          
                     end: 100
                 }
            ],
            legend: {               
                show:true,
                data:['cpu']
            },
            color:[
                   '#FF3333'    

                   ],
            toolbox: {              
                show: true,
                feature: {                
                    saveAsImage: {}     
                }
            },
            xAxis:  {           
   //             type : 'time',
                type : 'category',
                data : []   
            },
            yAxis : [   
                        {
                             type : 'value',
                             name : 'usage',
                             /* max: 120,
                             min: -40, */
                             axisLabel : {
                                 formatter: '{value}'   
                             }
                         }

            ],
            series : [  
                        {
                            name:'cpu',
                            type:'line',
                            symbol:'emptydiamond',
                            data:[]
                        }               
            ]
        };

        myChart.showLoading();  

         var cpus=[];       
         var dates=[];      
         setInterval(function () {
         $.ajax({  
         type : "post",     
         async : true,      
         url : "/ip/test/", 
         data : {name:"A0001"},     
         dataType : "json",     
         success : function(result) {
             if (result != null && result.data.length > 0) {
                    for(var i=0;ivar time_tmp = new Date(parseInt(result.data[i].datestr)*1000);
                       dates.push(time_tmp.getFullYear()+"/"+time_tmp.getMonth()+"/"+time_tmp.getDay());
                    }
                    console.log(dates);
                    myChart.hideLoading();  

                    myChart.setOption({     
                     xAxis: {
                         data: dates    
                     },
                     series: [  
                                {
                                 // 根据名字对应到相应的系列
                                 name: 'cpu',
                                 data: cpus
                            }
                    ]
                 });      
             }
             else {
                 alert("error");
                 myChart.hideLoading();
             }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败，可能是服务器开小差了");
            myChart.hideLoading();      
        }
    });},1000);
    myChart.setOption(option);  //载入图表

后台端返回示例：

def ip_test(request):
    username = getloginuser(request)
    if 1==1:

        value = random.randint(12, 20)

        dt = "2016-05-05 20:28:54"
        timeArray = time.strptime(dt, "%Y-%m-%d %H:%M:%S")
        timestamp1 = time.mktime(timeArray)
        tm = int(time.time())

        ResponseData = {"status": 0, "msg": '', "data": [{'usage':value,'datestr':tm}]}

        return HttpResponse(json.dumps(ResponseData), content_type="application/json")

这里能显示基本的数据了，但是还有很多的问题需要处理。dba们赶紧用起来吧，不在害怕前端显示！！