纯前端--类似于echart省份排序的动态排序效果

由于要求纯前端实现动态排序得效果，考虑着这种方法是最接近。提供几个重要代码

	//给定数组内随机排序
    var rank_arr = ['全省科技馆天宫课堂','现代科技馆体系假设建设','安徽省科技馆防控','科普作家协会交流','门户网改版上线','主题展览设计与专题','十一届科普产品博览交易会','省馆科普微课堂','科普微课堂微声音','赤子丹心中国梦系列']
    var trend_arr = ['up','down'];
    function Shuffle(o) {
      for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
    };

	//随机生成的数组从大到小排序
    let readingAmount_arr = []
    function readingAmountFun(){
      for(i=0;i<10;i++){
        readingAmount_arr.push(parseInt(Math.random() * (6000 - 5000 + 1) + 5000 ))
        readingAmount_arr = readingAmount_arr.sort((a,b) => b-a)
      }
    }

 var trend_arr = ['up','down'];
 //在数组中随机获取值
trend_arr[Math.floor((Math.random()*trend_arr.length))]

完整代码：

  function tableShowHotReadingTop10(id, container) {
  
    var datalist = [];

	//给定数组内随机排序
    var rank_arr = ['全省科技馆天宫课堂','现代科技馆体系假设建设','安徽省科技馆防控','科普作家协会交流','门户网改版上线','主题展览设计与专题','十一届科普产品博览交易会','省馆科普微课堂','科普微课堂微声音','赤子丹心中国梦系列']
    var trend_arr = ['up','down'];
    function Shuffle(o) {
      for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
    };

	//随机生成的数组从大到小排序
    let readingAmount_arr = []
    function readingAmountFun(){
      for(i=0;i<10;i++){
        readingAmount_arr.push(parseInt(Math.random() * (6000 - 5000 + 1) + 5000 ))
        readingAmount_arr = readingAmount_arr.sort((a,b) => b-a)
      }
    }
	
    function startRequest() {
      Shuffle(rank_arr);
      readingAmount_arr = []//清空readingAmount_arr，防止数据添加过多
      readingAmountFun()
      for(i=0;i<10;i++){
        datalist.push({
          readingAmount: readingAmount_arr[i],//获取readingAmount_arr中数据对应添加进去
          name:rank_arr[i],//获取rank_arr中数据对应添加进去
          rank:parseInt(Math.random() * (10 - 1 + 1) + 1 ),
          trend:trend_arr[Math.floor((Math.random()*trend_arr.length))]
        })
      }
      addTableHotReadingTop10(id, datalist );
      datalist = [];//清空datalist，防止数据添加过多
    } 
    startRequest()
    setInterval(startRequest, 3000);//每三秒重新生成数据
  }

  function addTableHotReadingTop10(id, datalist) {
    $("."+id).empty()//记得清空原来的数据
    datalist.map(function (v, i) {
      let trend = "";
      if (v.trend === "up") {
        trend = "value-increase";
      } else if (v.trend === "down") {
        trend = "value-decrease";
      }
      let html =
        '<tr class="tr-data"><td class="td-data td-item1">' +
        Number(i + 1) +
        "</td>" +
        '<td class="td-data td-item2 tbl-cell-cpgxs">' +
        v.name +
        "</td>" +
        '<td class="td-data td-item3 tbl-cell-cpgxs">' +
        v.readingAmount +
        "</td>" +
        '<td class="td-data td-item4 tbl-cell-cpgxs">' +
        v.rank +
        '名<i class="' + trend + '"></i></td>' +
        "</tr>";
      $("." + id).append(html);
    });
  }