Ajax in the Vue component cannot use sort sorting on the data variables after obtaining the JSON and assigning it. - Codes Helper

problem description

after I use axios to get JSON data from the server, I assign values to the data variables in the .vue component, and then modify the ordering of the data variables through the methods creation method, but after using the sort () method and packaging with webpack, the sort () method is effective, but an error is reported and affects the echats chart generation.

the environmental background of the problems and what methods you have tried

the development environment is: nodeJS + webpack + vue + axios + echarts
1. Try to reparse JSON into a string and package it into JSON to see if it is a JSON problem, but the result is not.
2. Delete echarts to see if there is an echarts problem, but only one error is missing.
3. Load the original data variable with the new variable, and then use sort, and the result will still be reported to sort is not a function.

related codes

main.vue file:

< template >

<div class="container content_area">
    <div class="row">

            <div class="col-12">
                <div class="charts">
                    <div id="main_charts" style="height: 100%"></div>
                </div>
                    <!--  -->
                <div class="content_title"></div>
                <table class="table table-striped">
                      <thead>
                        <tr>
                          <th scope="col">-sharp</th>
                          <th scope="col"></th>
                          <th scope="col"></th>
                          <th scope="col"></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">1</th>
                          <td>Mark</td>
                          <td>Otto</td>
                          <td>@mdo</td>
                        </tr>
                        <tr>
                          <th scope="row">2</th>
                          <td>Jacob</td>
                          <td>Thornton</td>
                          <td>@fat</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td>Larry</td>
                          <td>the Bird</td>
                          <td>@twitter</td>
                        </tr>
                      </tbody>
                </table>
                <!--  -->
                    
                    
                    
        </div>
            
    </div>
</div>

< / template >

< script >
/ / echarts Chart insert
import {pie} from". / pie.js";

export default {

data(){
    return {all_data:""}
},
mounted:function(){
    var _self=this;
    var myDate=new Date();
    if(eval(myDate.getMonth()+1)<10){
        var month="0"+eval(myDate.getMonth()+1);
    }else{
        var month=eval(myDate.getMonth()+1);
    }
    if(myDate.getDate()<10){
        var day="0"+myDate.getDate();
    }else{
        var day=myDate.getDate();
    }
    
    var dateNow=myDate.getFullYear() +"-"+ month +"-"+ day;
    var post_date={"dateNow":dateNow};
    
    axios.post("http://127.0.0.1:8080/today",post_date).then(results=>{
    
    _self.all_data=results.data;
    
    }).catch(function(err){console.log(err)});
    
pie();
},
methods:{
    "topOne":function(){
        //
        console.log(this.all_data);
        var JsonA=this.all_data.sort(function(a,b){return b.order_num - a.order_num});
        return JsonA[0].order_name;
        
        //JSON
        var JsonB=[{"name","test1","age","12"},{"name":"test3","age":"32"},{"name":"test2","age":"22"}];
        return JsonB.sort(function(a,b){return a.age - b.age});
        
    }
}

}

< / script >

this is the all_data data in Vue (the content is returned from the server):

:

I hope the gods can see that I have been thinking about it for a long time, so I can only come up and ask for help. Thank you.