疫情数据分析平台（七）：数据排行榜

网站中有这么一个功能，根据现存确诊的情况进行数据排行，并显示在页面中。由于我在本次项目前端开发主要采用eltab来承载ui，所以数据排行被设计在一个表格中，然后显示在一个eltab中。数据则是从后端获取，不过后端传过来的数据是杂乱的，即未排序的，因此需要我在前端用JavaScript进行数据排序。首先获取数据，用axios方法：

var _this=this
      this.$axios.get('/user/world_data_dead').then(resp=>{
        if(resp&&resp.status===200){
          _this.worldData=resp.data
        }

请求到数据后传入vue的声明数组中，然后利用axios请求返回的是一个promise对象，可以使用then实现同步函数，在then函数中设计匿名函数处理数据：

.then(()=>{
        for (var i=0;i<this.worldData.length;i++){
          var obj={
            name:this.worldData[i].name,
            confirmCount:this.worldData[i].value,
            death:this.worldData[i].dead
          }
          this.worldRankdata.push(obj)

        }

将数据构造成我们需要的格式，然后调用排序函数进行排序：

升序排序：

sortByConfirmascending(ary,key){
      return ary.sort(function(a,b){
        let x=a[key]
        let y=b[key]
        return ((x<y)?-1:(x>y)?1:0)
      })
    },

降序：

sortByConfirmDescending2(ary,key){
      return ary.sort(function(a,b){
        let x=a[key]
        let y=b[key]
        return y-x
      })
    },

注意到排序算法的特殊写法，返回值若是负数，则小于，正数则是大于，以此为基准两两比较，再运用到整个数组中。实际上，该函数能够运用于所以数据格式，包括string字符串类型。

对于中国地区的排序是一样的，贴出代码：

loadChinaRankData(){
      var _this=this
      this.$axios.get("/user/china_data_dead").then(resp=>{
        if(resp&&resp.status===200){
          _this.chinaData=resp.data
        }
      }).then(()=>{
        for (var i=0;i<this.chinaData.length;i++){
          var obj={
            name:this.chinaData[i].name,
            confirmCount:this.chinaData[i].value,
            death:this.chinaData[i].dead
          }

          this.chinaRankdata.push(obj)
          this.sortByConfirmDescending2(this.chinaRankdata,"confirmCount")
        }

      })
    },

mounted() {
    this.loadWorldRankData()
    this.loadChinaRankData()
  },

<el-tabs type="border-card" class="tab-box">
    <el-tab-pane>
      <span slot="label"><i class="el-icon-date"></i> 中国疫情</span>
      <el-table
        :data="chinaRankdata"
        height="280"
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="地区"
          width="100">
        </el-table-column>
        <el-table-column
          prop="confirmCount"
          label="现存确诊">
        </el-table-column>
        <el-table-column
          prop="death"
          label="死亡">
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label"><i class="el-icon-date"></i> 世界疫情</span>
      <el-table
        :data="worldRankdata"
        height="280"
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="国家"
          width="100">
        </el-table-column>
        <el-table-column
          prop="confirmCount"
          label="累计确诊">
        </el-table-column>
        <el-table-column
          prop="death"
          label="死亡">
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>