var scaleData = [{
'name': 'HTML5',
'value': 10
},
{
'name': 'CSS3',
'value': 10
},
{
'name': 'NODE',
'value': 10
},
{
'name': 'VUE',
'value': 10
},
{
'name': 'PHP',
'value': 10
},
{
'name': 'MYSQL',
'value': 10
},
{
'name': 'CMS',
'value': 10
},
{
'name': 'SEO',
'value': 10
}, {
'name': 'REACT',
'value': 10
}, {
'name': 'ZBLOG',
'value': 10
}, {
'name': 'GIT',
'value': 10
}, {
'name': '其它',
'value': 10
}];
var rich = {
white: {
color: '#fff',
align: 'center',
fontWeight: 'bold',
padding: [3, 0]
}
};
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
};
var data = [];
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
name: scaleData[i].name,
itemStyle: {
normal: {
borderWidth: 4,
// shadowBlur: 30,
borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: '#af6c8b'
}, {
offset: 1,
color: '#4b4b84'
}]),
// shadowColor: color1[i],
color: 'rgba(255, 153, 153,0)',
opacity: 0.75,
}
}
}, {
value: 2,
name: '',
itemStyle: placeHolderStyle
});
}
var seriesObj = [{
name: '',
type: 'pie',
clockWise: false,
radius: [110, 200],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
fontWeight: 'bold',
formatter: function(params) {
var percent = 0;
var total = 0;
for (var i = 0; i < scaleData.length; i++) {
total += scaleData[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== '') {
return params.name + '\n{white|' + '占比' + percent + '%}';
} else {
return '';
}
},
rich: rich
},
labelLine: {
show: false,
}
}
},
data: data
}];
option = {
backgroundColor: '#030c2b',
tooltip: {
show: false
},
legend: {
show: false
},
toolbox: {
show: false
},
series: seriesObj
}
点击运行 》