示例:
let datas = [
{
name: "提高卫生标注",
value: 100,
},
{
name: "加强安全教育",
value: 40,
},
{
name: "规范仪容仪表",
value: 50,
},
{
name: "提升言谈举止",
value: 30,
},
{
name: "增强服务意识",
value: 30,
},
];
var option = {
grid: {
x: '30%',
y: '3',
x2: '5%',
y2: '5%',
borderWidth: 1,
borderColor: '#f0f0f0',
},
title: [
{
show: true,
text: '{a|设备状态}{b|数量}{c|占比}',
// text: '{b|数量}{c|占比}',
top: '40%',
left: '80%',
textStyle: {
rich: {
a: {
align: 'center',
fontSize: 14,
width: 20,
color: 'black',
fontWeight:'bolder',
padding: [0, 0, 0, 20],
},
b: {
align: 'center',
fontSize: 14,
color: 'black',
fontWeight:'bolder',
width: 5,
padding: [0, 0, 0, 60],
},
c: {
align: 'center',
fontSize: 14,
width: 5,
fontWeight:'bolder',
color: 'black',
padding: [0, 0, 0, 45],
},
},
},
},
],
// color: ["#F56463", "#00C6FF", "#F09615", "#0079E6"],
legend: {
// itemHeight: 14,
// itemWidth: 14,
// icon: "rect",
orient: "vertical",
top: "center",
right: "5%",
textStyle: {
align: "left",
color: "#",
verticalAlign: "middle",
rich: {
name: {
width:150,
fontSize: 16,
},
value: {
width:20,
align:"right",
fontFamily: "Medium",
fontSize: 16,
},
rate: {width:10,
align:"right",
fontSize: 16,
},
},
},
data: datas,
// formatter: (name) => {
// if (datas.length) {
// const item = datas.filter((item) => item.name === name)[0];
// console.log(datas)
// return `{name|${name}}{value| ${item.value} {rate| }`;
// // return `{name|${name}:}{value| ${item.value}} {rate| ${item.value}%}`;
// }
// },
formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return name + ' ' + oa[i].value + '个 ' + (oa[i].value/num * 100).toFixed(2) + '%';
}
}
}
},
// tooltip: {
// trigger: "item",
// // formatter: "{d}%",
// },
tooltip: {
trigger: 'item',
formatter: function(parms) {
var str =
// parms.name + "</br>" +
parms.marker + "" + parms.data.name + "</br>" +
"数量:" + parms.data.value + "个"+"</br>" +
"占比:" + parms.percent + "%";
return str;
}
},
series: [
{
name: "",
type: "pie",
radius: ["50%", "70%"],
center: ["35%", "50%"],
// roseType: "radius",
label: {
normal: {
show: false,
},
formatter: "{d}%",
},
data: datas,
},
],
};