js使用sort将JSON数据进行排序 - 一咻儿

在把数据通过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);
        
        //后面的代码与排序无关
     }

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

最后页面的效果。

posted on 2019-12-06 11:07 一咻儿阅读(5409) 评论(0) 收藏举报

刷新页面返回顶部