echarts 饼图逆时针降序排序

需求

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

实现

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

不指定compareFunction，默认按照unicode位点进行排序，
比如 [1, 10000, 2, 22] 就是一个排序号的array。
指定 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}}}]}

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

echarts 饼图逆时针降序排序相关推荐

php表格单元格怎么实现排序,angularjs,_angular表格点击序号进行升序，降序排序，怎么实现。，angularjs - phpStudy...
angular表格点击序号进行升序,降序排序,怎么实现. 序号内容姓名地点时间序号 {{$index + 1}}{{$index + 1}}{{$index + 1}}{{$index + 1}}{{ ...
seaborn可视化条形图并按照降序排序条形图进行可视化Sort Bars in Barplot in Descending Order in Python
seaborn可视化条形图并按照降序排序条形图进行可视化Sort Bars in Barplot in Descending Order in Python 目录
pandas中dataframe索引排序实战：pandas中dataframe索引降序排序、pandas中dataframe索引升序排序
pandas中dataframe索引排序实战:pandas中dataframe索引降序排序.pandas中dataframe索引升序排序目录
Python 让所有奇数都在偶数前面，而且奇数升序排列，偶数降序排序
这个问题的要求是: 让所有奇数都在偶数前面,而且奇数升序排列,偶数降序排序,比如说字符串'1982376455',变成'1355798642' 具体代码: def func1(l):if isins ...
Java 8 –按值对HashMap进行升序和降序排序
在上一篇文章中,我向您展示了如何通过键对Java 8中的Map进行排序 ,今天,我将教您如何使用Java 8功能(例如,lambda表达式,方法引用,流和新方法) 按值对Map进行排序.添加到java ...
C++中set按降序排序
set一般插入元素时,默认使用关键字类型的< 运算符来比较两个关键字,故一般插入后为升序,举个例子: int main(int argc, char* argv[]) {set<int&g ...
分别用Comparable和Comparator两个接口对下列四位同学的成绩做降序排序，如果成绩一样，那在成绩排序的基础上按照年龄由小到大排序。姓名（String
代码 import java.util.*;/*3.分别用Comparable和Comparator两个接口对下列四位同学的成绩做降序排序,如果成绩一样,那在成绩排序的基础上按照年龄由小到大排序.姓名 ...
Map的value值降序排序与升序排序(java)
本文为原创博客,仅供技术学习使用.未经允许,禁止转载程序 package test;import java.util.Collections; import java.util.Comparator ...
降序排序_排序简单，应用不易，使用Excel排序的几点建议
对数据排序,是数据分析中最基本.最常用也是最重要的分析方法.Excel提供了丰富.简单.灵活的排序方法和排序方式,包括单个排序.组合排序等.对于学习者短时间内掌握Excel的排序,难度不大.问题可能更 ...

echarts 饼图逆时针降序排序

需求

实现

代码

echarts 饼图逆时针降序排序相关推荐

最新文章

热门文章

echarts 饼图 逆时针降序排序

需求

实现

代码

echarts 饼图 逆时针降序排序相关推荐

最新文章

热门文章

echarts 饼图逆时针降序排序

echarts 饼图逆时针降序排序相关推荐