这篇博客介绍了如何使用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拆分成两个数组，用来单独显示图例，(j
最低0.47元/天 解锁文章
5571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
