博客

需求

echarts饼图，按照其每块的大小，逆时针从大到小排序，这样很清晰的看到大小关系。

实现

• 因为饼图数据是 [{ name, value }] 这样的 JSONArray，而我们查echarts官方文档可以得知，echarts默认是顺时针排序的，那么我们只要将 JSONArray按照value进行排序，最后得到的就是一个有序的饼图（不论是逆时针还是顺时针从大到小）；
  
  

• JSONArray进行排序，可以查看MDN官方文档得知：
  
  
arr.sort([compareFunction])

  
  其中的参数 compareFunction是可选的：

1. 不指定compareFunction，默认按照unicode位点进行排序，
   
   比如 [1, 10000, 2, 22] 就是一个排序号的array。

2. 指定 compareFunction(a, b)
   
   (1) 如果 compareFunction(a, b) 小于0，a会被排到b前面；
   
   (2) 如果 compareFunction(a, b) 大于0， b会被排到a前面；
   
   (3) 如果 = 0，相对位置不变。
   
   所以如果比较数字，则可以写成

   array.sort(function(a, b) return { a - b }); 
   

   这样按照升序排列。
   
   而也可以对JSONArray进行排序，指定属性即可 ：

   array.sort(funciton(a,b) { return a.value - b.value } )
   

   除此之外，还可以写成函数表达式的形式:

   array.sort( (a,b) => a.value - b.value );
   

代码

	tempOption = {
        title: titleTemp,
        tooltip: {
          formatter: format
        },
        legend: {
          type:'scroll',
          orient: 'vertical',
          right:0,
          top:20,
          bottom:20
        },
        color: labelColor,
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 5
            },
            data: valueAfter.sort((a,b) => a.value - b.value ),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
                normal:{
                  show:true,
                  formatter:'{b}({d}%)'
                },
                labelLine:{show:true}
              }
          }
        ]
      }

这样，就会顺时针 升序排列，同样是逆时针降序排列