echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）

本篇博文是记录一下我在开发过程中遇到的一个问题，那就是对于南丁格尔玫瑰图（或者饼图）如何根据百分比大小进行排列，可以很直观的看出数据高低。

首先给大家展示一下官方的样式，具体代码可以去官网上查看：https://www.echartsjs.com/examples/zh/editor.html?c=pie-roseType

 

其次再看一下我优化后的样式，本节主要讲解这个：

 我是在前台页面处理的，后台数据根据自己的实际情况去取数据，我这里是根据服务调用的方式取到的数据，是一个json对象，是下面这种类型的：

其次是我的图例名称，由于不是从后台获取的，是在前台直接写好的，所以这里我声明了一个数组来接收这些数据，但为了不影响图例与数据的对应性，我做了如下操作：将数据的值与我后台拿到的json对象json_data的key值做了比较，如果一样的话，就将数据存到一个新的数组json_arr里，以[name：'图例的name',value : '对应的数据']的格式表示：

eg：[value : '100, name : '初中']。然后对这个数组json_arr进行排序，最后把数组json_arr拆分成两个数组，用来单独显示图例，(json_arr是用来替换标准的数据格式的)，最后分别把处理好的数据放到option中对应的位置中去就可以了，代码截图如下：