var total = 0;
var data = [35, 30, 22, 55];
var getsjjg = ['>100000', '50000-100000', '10000-50000', '<10000'];
var getsjjgrs = data;
var syjgdata = [];
for (let i in getsjjgrs) {
total += getsjjgrs[i];
}
for (var i = 0; i < getsjjg.length; i++) {
syjgdata.push(
{
name: getsjjg[i],
value: getsjjgrs[i],
},
{
value: total / 150,
name: '',
}
);
}
var colorList = [
['rgba(0,132,255,1)', 'rgba(0,132,255,0.7)'],
['', ''],
['rgba(55,255,201,1)', 'rgba(55,255,201,0.7)'],
['', ''],
['rgba(25,214,255,1)', 'rgba(25,214,255,0.7)'],
['', ''],
['rgba(255,231,119,1)', 'rgba(255,231,119,0.7)'],
['', ''],
];
let option = {
backgroundColor: "black",
grid: {
left: '0',
top: 0,
right: '0',
bottom: 0,
},
tooltip: {
trigger: 'item'
},
legend: {
icon: 'circle',
x: '10%',
y: '10%',
itemWidth: 10,
itemGap: 15,
align: 'left',
textStyle: {
color: '#D7E5FF',
},
},
title: [{
text: getsjjg[0],
top: '46%',
textAlign: 'center',
left: '55%',
textStyle: {
color: '#D7E5FF',
fontSize: 14,
fontWeight: '400',
},
}, {
text: data[0],
top: '53%',
textAlign: 'center',
left: '54%',
textStyle: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
},
}, {
text: '家',
top: '53.5%',
textAlign: 'center',
left: '58%',
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: '400',
},
}],
series: [
{
itemStyle: {
normal: {
color: 'rgba(0,0,0,0.6)',
},
},
type: 'pie',
hoverAnimation: false,
radius: ['53%', '62%'],
center: ['58%', '50%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 1,
},
],
z: 100,
},
{
itemStyle: {
normal: {
color: 'rgba(0,0,0,0.6)',
},
},
type: 'pie',
hoverAnimation: false,
radius: ['53%', '71%'],
center: ['58%', '50%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 1,
},
],
z: 100,
},
{
itemStyle: {
normal: {
color: function (params) {
if (params.dataIndex == 0) {
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: colorList[params.dataIndex][0],
},
{
offset: 1,
color: colorList[params.dataIndex][1],
},
]);
} else {
if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: colorList[params.dataIndex][0],
},
{
offset: 1,
color: colorList[params.dataIndex][1],
},
]);
}
}
},
},
},
labelLine: {
show: false,
},
label: {
show: false
},
hoverAnimation: true,
type: 'pie',
radius: ['53%', '80%'],
center: ['58%', '50%'],
data: syjgdata,
z: 10,
},
]
};