echarts饼图的⼀种---南丁格尔玫瑰图按照百分⽐⼤⼩进⾏排序以及颜⾊设置的两种⽅式（。。。
本篇博⽂是记录⼀下我在开发过程中遇到的⼀个问题，那就是对于南丁格尔玫瑰图（或者饼图）如何根据百分⽐⼤⼩进⾏排列，可以很直观的看出数据⾼低。
其次再看⼀下我优化后的样式，本节主要讲解这个：
我是在前台页⾯处理的，后台数据根据⾃⼰的实际情况去取数据，我这⾥是根据服务调⽤的⽅式取到的数据，是⼀个json对象，是下⾯这种类型的：
其次是我的图例名称，由于不是从后台获取的，是在前台直接写好的，所以这⾥我声明了⼀个数组来接收这些数据，但为了不影响图例与数据的对应性，我做了如下操作：将数据的值与我后台拿到的json对象json_data的key值做了⽐较，如果⼀样的话，就将数据存到⼀个新的数组json_arr⾥，以[name：'图例的name',value : '对应的数据']的格式表⽰：
eg：[value : '100, name : '初中']。然后对这个数组json_arr进⾏排序，最后把数组json_arr拆分成两个
数组，⽤来单独显⽰图例，(json_arr是⽤来替换标准的数据格式的)，最后分别把处理好的数据放到option中对应的位置中去就可以了，代码截图如下：
具体代码：
//⽂化程度
var selectNameInChart3 = "";
function initChart3(){
$.ajax({
type: 'post',
url: conUrl+'/suite/data/df/homeService?id=DF00028',
dataType: 'json',
success: function(result) {
var json_data = result.DATA.M000093[0];//json数据后台（从调⽤服务过来的）
var json_arr = [];//声明⼀个数组⽤来接收处理过格式的数据
var NameArr = ['⼩学及以下', '初中', '⾼中', '技⼯', '中专', '⼤专', '本科', '硕⼠', '博⼠', '其他'];  for (var i = 0; i <= NameArr.length-1; i++) {
for ( var key in json_data) {
if(NameArr[i] == key){//NameArr[i] = key; 条件：把json对象的key值与数组的值相对应
var name = NameArr[i];
var value = json_data[key];
json_arr.push({
value: value,
name: name
});
}
}
}
json_arr.sort(compare);
var name_list = [];
var value_list = [];
for (var i = 0; i <= json_arr.length-1; i++) {
name_list.push(json_arr[i].name);
value_list.push(json_arr[i].value);
}
chart3 = echarts.ElementById('chart3'));
var option = {
title: {
text: '⽂化程度',
x: 'center',
y: 'center',
textStyle: {
fontSize: 26,
fontWeight: 'bolder',
color: '#ffffff'
},
},
tooltip: {
trigger: 'item',
triggerOn: 'none',
hideDelay: 0,
formatter: '{a} <br/>{b}: {c} ({d}%)',
position: 'inside',
backgroundColor: 'rgba(18,79,130,.5)',
borderColor: '#3788c4',
borderWidth: 2,
textStyle: {
fontSize: 20,
color: "#ffffff"
}
},
legend: {
orient: 'horizontal',
left: 'center',
top: 'bottom',
itemWidth: 10,  // 设置图例图形的宽
itemHeight: 10,  // 设置图例图形的⾼
icon: "circle",
textStyle: {
color: '#ffffff',  // 图例⽂字颜⾊
fontSize:12
},
data: name_list,//图例数据
},
/
/颜⾊设置第⼀种⽅法：
//color:['#0bC3F5','#0376E9','#85E9B5','#FBF88D','#FEC34D','#FBBAA6','#9A54C8','#F87E7D','#7E9CD2','#6E83DE'],        series: [
{
name: '⽂化程度分析',
type: 'pie',
clockWise : false,
startAngle: 90,
radius: ['40%', '70%'],  // 设置环形饼状图，第⼀个百分数设置内圈⼤⼩，第⼆个百分数设置外圈⼤⼩
roseType: 'radius',
selectedMode: 'single',
label: {
show: false
},
hoverAnimation: false,
data: json_arr,//动态的数据，做了排序等处理
//颜⾊设置第⼆种⽅式，设置渐变⾊（推荐使⽤）
itemStyle: {
color: function(params) {
var colorList = [
{
c1: '#0bC3F5',
c2: '#0aB3F4',
c3: '#0993EC'
},
{
c1: '#0376E9',
c2: '#037BEB',
c3: '#0481ED'
},
{
c1: '#85E9B5',
c2: '#64CF99',
c3: '#7BE3AE'
},
{
c1: '#FBF88D',
c2: '#F0EF83',
c3: '#E4E476'
},
{
c1: '#FEC34D',
c2: '#FEC957',
c3: '#FDCD5F'
},
{
c1: '#FBBAA6',
c2: '#FEA289',
c3: '#FE764E'
},
{
c1: '#6E83DE',
c2: '#546BD1',
c3: '#3B54C8'
}]
return aphic.LinearGradient(1, 0, 0, 0, [{ //颜⾊渐变函数前四个参数分别表⽰四个位置依次为左、下、右、上                                offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 0.5,
color: colorList[params.dataIndex].c2
},{
offset: 1,
color: colorList[params.dataIndex].c3
}])
}
}
}
]
};
chart3.setOption(option,true);
<('pieselectchanged', function (params) {
if(selectNameInChart3!=params.name){
selectNameInChart3 = params.name;
chart3.dispatchAction({
font weight boldertype: 'showTip',
seriesIndex: 0,
name: selectNameInChart3
});
}else{
selectNameInChart3 = "";
chart3.dispatchAction({
type: 'hideTip'
});
}
});
}
})
}
最后给⼤家看⼀下浏览器上控制台输出的json_arr数据格式，也是最终我们需要的数据格式：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。