在legend里写formatter回调函数进行内容拼接
1.此处由于图例太长,同时在回调函数里写了拼接函数
2.这样的写法要注意大的option{},需要写成let option={};如果写成this.option后回调函数不起作用
legend: {
orient: 'vertical',
left:'58%',
top:'24%',
icon:'circle',
textStyle: {
color:'rgba(64,64,64,1)',
lineHeight:'20'
},
formatter: function(params) {
let data = option.series[0].data;
let newValue = 0;
let newPercent = 0;
for (let i = 0; i < data.length; i++) {
if (data[i].name == params) {
newValue = data[i].value;
newPercent = capacityStatusPercent[i];
}
}
var newName = "";
var nameLength = params.length;
if (nameLength > 8) {
newName = '···' + params.substr(-8);
} else {
newName = params;
}
return newName + ' ' + newValue + 'GB' + ' ' + newPercent + '%';
},
},
总体图表函数如下:
let option = {
title:{
show:true,
text:'已用总容量',
subtext:capacityStatusTotal + 'GB',
textStyle:{
color:'rgba(64,64,64,1)',
fontFamily :'PingFangSC-Medium,PingFangSC',
fontWeight:'500',
fontSize:'14px',
},
subtextStyle:{
color:'rgba(64,64,64,1)',
fontFamily :'PingFangSC-Medium,PingFangSC',
fontWeight:'500',
fontSize:'14px',
},
left:'29%',
top:'41%',
textAlign:'center',
},
series: [
{
name:'容量状态概览',
type:'pie',
center:['30%', '48%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:capacityStatusAmount[0], name:capacityStatusName[0] },
{value:capacityStatusAmount[1], name:capacityStatusName[1] },
{value:capacityStatusAmount[2], name:capacityStatusName[2] },
{value:capacityStatusAmount[3], name:capacityStatusName[3] },
{value:capacityStatusAmount[4], name:capacityStatusName[4] },
]
}
],
tooltip: {
trigger: 'item',
formatter: "{b}: {c}GB ({d}%)",
confine:'true',//限制在显示框里
// 固定在顶部
position: function (point) {
return [point[0], '10%'];
}
},
legend: {
orient: 'vertical',
left:'58%',
top:'24%',
icon:'circle',
textStyle: {
color:'rgba(64,64,64,1)',
lineHeight:'20'
},
formatter: function(params) {
let data = option.series[0].data;
let newValue = 0;
let newPercent = 0;
for (let i = 0; i < data.length; i++) {
if (data[i].name == params) {
newValue = data[i].value;
newPercent = capacityStatusPercent[i];
}
}
var newName = "";
var nameLength = params.length;
if (nameLength > 8) {
newName = '···' + params.substr(-8);
} else {
newName = params;
}
return newName + ' ' + newValue + 'GB' + ' ' + newPercent + '%';
},
},
};
return option;