#echarts 环形进度图
#效果图
#上代码
data = [
{
name: '发票管理',
value: 360,
},
{
name: '纳税申报',
value: 252,
},
{
name: '综合服务',
value: 230,
},
];
arrName = getArrayValue(data, 'name');
arrValue = getArrayValue(data, 'value');
sumValue = eval(arrValue.join('+'));
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: [],
yAxis: [],
};
for (let i = 0; i < data.length; i++) {
// console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
res.series.push({
name: '',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
center: ['40%', '55%'],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
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,
},
hoverAnimation: false,
},
],
});
res.series.push({
name: '',
type: 'pie',
silent: true,
z: 1,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
center: ['40%', '55%'],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
data: [
{
value: 7.5,
itemStyle: {
color: '#add2d2', //圆环背景色-全
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
{
value: 2.5,
name: '',
itemStyle: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
],
});
res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%');
}
return res;
}
option = {
backgroundColor: '#ddd',
legend: {
show: true,
icon: 'circle',
top: 'center',
top: '16%',
bottom: '53%',
left: '40%',
data: arrName,
width: 40,
padding: [0, 16],
itemGap: 25,
//图例显示
formatter: function (name) {
return '{title|' + name + '}{value|' + ((objData[name].value / sumValue) * 100).toFixed(2) + '} {title|%}';
},
textStyle: {
rich: {
title: {
fontSize: 20,
lineHeight: 30,
color: '#fff',
},
value: {
fontSize: 18,
lineHeight: 20,
color: '#fff',
},
},
},
},
title: {
text: '', //图形标题,配置在中间对应效果图的80%
left: '20%',
top: '50%',
textStyle: {
color: 'rgb(50,197,233)',
fontSize: 16,
align: 'left',
},
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{a}<br>{b}:{c}({d}%)',
},
color: ['yellow', 'blue', 'green'],
xAxis: [
{
show: false,
},
],
series: optionData.series,
};