基于vue的折线图

今天在公司要求做一个折线图，百度了好久找到了一个不错的第三方接口，主要是一些数据的折线的表示。

TIM图片20191015195710.png

这个是官方给出的例图。
下面是我自己的代码

    
    
    
    

    

    

    
    

    
    
    

    

    
    


    
    



    

        

            

                

                

                    

                        

                            
                        
                        

                            

                            

                            5个
                            
总群数
                        
                    
                    

                        

                            
                        
                        

                            

                            去重前26人

                            去重后15人

                            
总人数
                        
                    
                    

                        

                            
                        
                        


                            今日1

                            本周5

                            本月13
                            
总入群人数
                        
                    
                    

                        

                            
                        
                        


                            今日0

                            本周3

                            本月9
                            
总退群人数
                        
                    
                
            

            


            

                
                

                    

                    

                        
序号
                        
群名称
                        
群人数
                        
进群人数
                        
退群人数
                        
发言人数
                        
发言数
                        
发言率
                    
                    
                    


                    
                
               
                共556条记录，每页显示
                
                    10
                    20
                    50
                
                    
                <
                1
                2
                3
                4
                5
                >
            
        
    

上面主要是页面的展示，下面是js的代码

$(function(){

    initData();

});

function initData(){
    var data = {
        type: "day",
        date: "2019-10-10",
        vcMerchantNo: "201908301000001",
        vcRobotSerialNo: "62D733BD77664476777C83354956B9AE"
    };

    ajaxByJSON("/js/json/groupOviewDetail.json", JSON.stringify(data), postCallBack);

    // ajaxByPOST("/group/groupOviewDetail", JSON.stringify(data), postCallBack);
}

function postCallBack(result) {
    if (result.success == false) {
        return;
    }

    var data = result.data;
    for (var i = 0; i < data.length; i++) {
        var tr = $("\n" +
            "            "+ (i+1) +"" +
            "            "+ data[i].vcName +"" +
            "            "+ data[i].hdUserNum +"" +
            "            "+ data[i].hdMsgNum +"" +
            "            "+ data[i].joinNum +"" +
            "            "+ data[i].exitNum +"" +
            "            "+ data[i].totalNum +"" +
            "            "+ data[i].hdRate +"%" +
            "        ");
        $("#tbody").append(tr);
    }
}

这是源码的GitHub地址：https://github.com/wcfb/StartDemo

如果发现有什么错误感谢指出，谢谢。