J***汐（2021-06-24 07:43:13 ）
对 #1版本 说：
正好用到，非常感谢作者提供的思路。针对需求对其稍微做出了点修改，增加了图例，删除了XY轴，换成了透明Pie来放名称标签。这样使图例跟图正常联动了，附代码：
data = [
{
name: '专科',
value: 900,
},
{
name: '本科',
value: 800,
},
{
name: '硕士',
value: 700,
},
{
name: '博士',
value: 600,
},
];
arrName = getArrayValue(data, 'name');
arrValue = getArrayValue(data, 'value');
sumValue = 1000;
objData = array2obj(data, 'name');
optionData = getData(data);
function getArrayValue(array, key) {
var key = key || 'value';
var res = [];
if (array) {
array.forEach(function (t) {
res.push(t[key]);
});
}
return res;
}
function array2obj(array, key) {
var resObj = {};
for (var i = 0; i < array.length; i++) {
resObj[array[i][key]] = array[i];
}
return resObj;
}
function getData(data) {
var res = {
series: [{
name: "大环",
type: 'gauge',
splitNumber: 15,
radius: '87%',
center: ['50%', '55%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
color: [
[1, '#1f59a7']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 32,
lineStyle: {
color: 'auto',
width: 3.5
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
name: '小环',
type: 'gauge',
splitNumber: 15,
radius: '80%',
center: ['50%', '55%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#1f59a7',
width: 3
},
length: 20,
splitNumber: 5
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
],
legend:[]
};
for (let i = 0; i < data.length; i++) {
res.series.push({ //数值外环
type: 'pie',
clockWise: false,
z: 2,
hoverAnimation: false,
radius: [70 - i * 15 + '%', 60 - i * 15 + '%'],
center: ['50%', '55%'],
label: {
show: true,
formatter: '{d}%',
fontSize: 25,
position: 'inside'
},
labelLine: {
show: false,
},
data: [
{
value: data[i].value,
name: data[i].name,
},
{
value: sumValue - data[i].value,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
},
tooltip: {
show: false,
},
label: {
show: false,
},
hoverAnimation: false,
},
],
});
res.series.push({ //内小环
type: 'pie',
silent: true,
z: -1,
clockWise: true,
hoverAnimation: false,
radius: [68 - i * 15 + '%', 62 - i * 15 + '%'],
center: ['50%', '55%'],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
data: [
{
value: 100,
name: data[i].name,
itemStyle: {
color: "RGB(12,64,128)",
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
],
});
res.series.push({ //主要为了渲染标签使用
type: 'pie',
z: 2,
radius: [70 - i * 15 + '%', 60 - i * 15 + '%'],
center: ['50%', '55%'],
label: {
normal:{
show: true,
formatter:function(params){ //标签内容
console.log(params)
return params.name
},
}
},
labelLayout:function(params){
return {
x: 550,
y: params.rect.y+20,
verticalAlign: 'middle',
align: 'center',
fontSize: 25,
draggable:true
}
},
data: [
{
value: 0,
name: data[i].name,
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
},
}
],
});
res.legend.push(data[i].name);
}
return res;
}
option = {
legend: {
data : optionData.legend
},
grid: {
top: '16%',
bottom: '54%',
left: '50%',
containLabel: false,
},
series: optionData.series,
};
-
承***生 回复 J***汐（2021-08-04 02:00:22 ）
对 #1版本 说：
很强
