js使用sort将JSON数据进行排序

Posted 2020-11-24 一咻儿

在把数据通过Echarts展示成统计图模式时，柱状统计图需要将数据进行从大到小来排序！

下面为所需要的数据：

 1 {
 2       mapData: [
 3           {name: \'北京\',value: \'555\'},
 4           {name: \'天津\',value: \'1000\'},
 5           {name: \'上海\',value: \'100\'},
 6           {name: \'重庆\',value: \'100\'},
 7           {name: \'河北\',value: \'600\'},
 8           {name: \'河南\',value: \'400\'},
 9           {name: \'云南\',value: \'350\'},
10           {name: \'辽宁\',value: \'70\'},
11           {name: \'黑龙江\',value: \'750\'},
12           {name: \'湖南\',value: \'10\'},
13           {name: \'安徽\',value: \'300\'},
14           {name: \'山东\',value: \'10\'},
15           {name: \'新疆\',value: \'400\'},
16           {name: \'江苏\',value: \'80\'},
17           {name: \'浙江\',value: \'160\'},
18           {name: \'江西\',value: \'150\'},
19           {name: \'湖北\',value: \'650\'},
20           {name: \'广西\',value: \'200\'},
21           {name: \'甘肃\',value: \'180\'},
22           {name: \'山西\',value: \'666\'},
23           {name: \'内蒙古\',value: \'120\'},
24           {name: \'陕西\',value: \'222\'},
25           {name: \'吉林\',value: \'520\'},
26           {name: \'福建\',value: \'220\'},
27           {name: \'贵州\',value: \'900\'},
28           {name: \'广东\',value: \'500\'},
29           {name: \'青海\',value: \'500\'},
30           {name: \'西藏\',value: \'800\'},
31           {name: \'四川\',value: \'700\'},
32           {name: \'宁夏\',value: \'10\'},
33           {name: \'海南\',value: \'590\'},
34           {name: \'台湾\',value: \'780\'},
35           {name: \'香港\',value: \'850\'},
36           {name: \'澳门\',value: \'999\'},
37           {name: \'南海诸岛\',value: \'700\'}
38       ]
39 }

 

现在需要通过 每条数据的value来进行排序，

这边使用的是 sort() 

1 function  sortId(a, b) {
2      return a.value-b.value
3 }
4 mapData.sort(sortId);

 

完整代码：

    data() {
          return {
            mapData: [
              {name: \'北京\',value: \'555\'},
              {name: \'天津\',value: \'1000\'},
              {name: \'上海\',value: \'100\'},
              {name: \'重庆\',value: \'100\'},
              {name: \'河北\',value: \'600\'},
              {name: \'河南\',value: \'400\'},
              {name: \'云南\',value: \'350\'},
              {name: \'辽宁\',value: \'70\'},
              {name: \'黑龙江\',value: \'750\'},
              {name: \'湖南\',value: \'10\'},
              {name: \'安徽\',value: \'300\'},
              {name: \'山东\',value: \'10\'},
              {name: \'新疆\',value: \'400\'},
              {name: \'江苏\',value: \'80\'},
              {name: \'浙江\',value: \'160\'},
              
              {name: \'广西\',value: \'200\'},
              {name: \'甘肃\',value: \'180\'},
              {name: \'山西\',value: \'666\'},
               ....... 
        ]
      }
    },
    methods: {
      sortId(a, b) {
        return a.value-b.value
      },
      drawLine (data){
          // 基于准备好的dom，初始化echarts实例
        let myChartChina = this.$echarts.init( document.getElementById(\'fzyChartChina\'))
        let mapName = [];
        this.mapData.sort(this.sortId);
        
        //后面的代码与排序无关
     }    

控制台可打印出排序后的结果查看

 

 最后页面的效果。